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

最新推荐文章于 2025-05-21 08:52:32 发布

原创最新推荐文章于 2025-05-21 08:52:32 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#electron

electron 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Electron应用中利用HTML5拖拽功能与Node.js的fs模块实现文件拖拽读取。具体包括所需环境配置、代码实现步骤及最终效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

系列文章目录

第一节 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：

<!DOCTYPE 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()
    })
  }
}