第四节 Electron 调用H5事件结合node模块fs 实现文件拖拽读取

系列文章目录

第一节 electron 介绍

第二节创建electron项目并启动

第三节 Electron运行流程、主进程渲染进程并使用nodejs

文章目录

前言

本文就介绍了使用H5的拖拽加上node的fs模块在electron里实现拖拽并读取文件内容。

一、通过API了解H5的拖拽事件

拖动事件：
ondrag   该事件在元素正在拖动时触发
ondragend   该事件在用户完成元素的拖动时触发
ondragenter   该事件在拖动的元素进入放置目标时触发
ondragleave   该事件在拖动元素离开放置目标时触发
ondragover   该事件在拖动元素在放置目标上时触发
ondragstart   该事件在用户开始拖动元素时触发
ondrop   该事件在拖动元素放置在目标区域时触发

二、开干！环境准备及编写代码

1.基于之前搭建的环境进行开发

在index.html renderer.js编写代码

2.详细代码

index.html：


html>
<html lang="en">
 
<head>
  <title>title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <script src="./renderer/renderer.js">script>
  <style>
    h2 {
      color: red;
    }
 
    #fileTxt {
      border: 1px solid #666;
      height: 400px;
      width: 400px;
      background-color: #f0f;
    }
  style>
head>
 
<body>
  <h2>Electron实例 拖拽并读取文件内容h2>
  <div id="fileTxt">div>
body>
 
html>

renderer.js


const fs= require("fs")
/* 
ondragenter  该事件在拖动的元素进入放置目标时触发
ondragleave	该事件在拖动元素离开放置目标时触发	 
ondragover	该事件在拖动元素在放置目标上时触发	 
ondragstart	该事件在用户开始拖动元素时触发	 
ondrop	该事件在拖动元素放置在目标区域时触发 
*/
window.onload = ()=>{
  var fileTxtDom = document.querySelector("#fileTxt")
  fileTxtDom.ondragenter = fileTxtDom.ondragleave = fileTxtDom.ondragover = function(){
    return false
  }
  fileTxtDom.ondrop=function(event){
    console.log(event)
    let filePath = event.dataTransfer.files[0].path
    fs.readFile(filePath,(err,docs)=>{
      if(err){
        console.log(err)
        return false
      }
      fileTxtDom.innerHTML = docs.toString()
    })
  }
}

总结

以上就是今天要讲的内容，主要思路就是利用H5的拖拽事件获取到文件的地址在用node提供的fs模块读取其内容并赋值给DOM

相关阅读:
图的邻接矩阵与搜索
SpringBoot + EasyExcel 实现表格数据导入
Java中异或操作和OTP算法
浅尝Spring注解开发_Servlet3.0与SpringMVC
R基本数据类型
java毕业设计参考文献Springboot+mysql+freemark校园竞赛报名管理平台[包运行成功]
FreeRTOS_事件标志组
项目管理软件dhtmlxGantt配置教程（三）：配置树列
m3u8文件格式讲解，Python解析m3u8文件，并获取在线地址
托管服务器常见的问题有哪些（常见托管问题解决）

原文地址：https://blog.csdn.net/hongc93/article/details/126281039