css/styles.css

 .for_file_drop {

     width: 100%;

     height: 100px;

     background-color: blueviolet;

 }

index.html

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="UTF-8">

     <title>Hello World!</title>

     <link rel="stylesheet" href="css/styles.css" />

   </head>

   <body>

     <h1>Hello World!</h1>

     We are using Node.js <span id="node-version"></span>,

     Chromium <span id="chrome-version"></span>,

     and Electron <span id="electron-version"></span>.

     <div>

         <h1>Process information</h1>

         <button onclick="getProcessInfo()">查询系统信息</button>

         </div>

     <div class="for_file_drop" id="drag_test">

       <h2>文件拖动到此处</h2>

       <span></span>

     </div>

     <!-- You can also require other files to run in this process -->

     <script src="./renderer.js"></script>

   </body>

 </html>

renderer.js

const fs = require("fs");

const dragWrapper = document.getElementById("drag_test");

dragWrapper.addEventListener("drop",(e)=>{

    e.preventDefault(); //阻止e的默认行为

    const files = e.dataTransfer.files;

    if (files && files.length>=1){

        const path = files[0].path;

        console.log("file:",path);

        const content = fs.readFileSync(path);

        console.log(content.toString());

    }

})

//这个事件也需要屏蔽

dragWrapper.addEventListener("dragover",(e)=>{

    e.preventDefault();

})

function getProcessInfo(){

    console.log("Cpu Usage:", process.getCPUUsage());

    console.log("env",process.env);

    console.log("arc",process.arch);

}

main.js

 // Modules to control application life and create native browser window

 const {app, BrowserWindow} = require('electron')

 const path = require('path')

 // Keep a global reference of the window object, if you don't, the window will

 // be closed automatically when the JavaScript object is garbage collected.

 let mainWindow

 function createWindow () {

   // Create the browser window.

   mainWindow = new BrowserWindow({

     width: 800,

     height: 600,

     webPreferences: {

       preload: path.join(__dirname, 'preload.js'),

       nodeIntegration: true // 注入node模块

     }

   })

   // and load the index.html of the app.

   mainWindow.loadFile('index.html')

   // Open the DevTools.

   // mainWindow.webContents.openDevTools()

   // Emitted when the window is closed.

   mainWindow.on('closed', function () {

     // Dereference the window object, usually you would store windows

     // in an array if your app supports multi windows, this is the time

     // when you should delete the corresponding element.

     mainWindow = null

   })

 }

 // This method will be called when Electron has finished

 // initialization and is ready to create browser windows.

 // Some APIs can only be used after this event occurs.

 app.on('ready', createWindow)

 // Quit when all windows are closed.

 app.on('window-all-closed', function () {

   // On macOS it is common for applications and their menu bar

   // to stay active until the user quits explicitly with Cmd + Q

   if (process.platform !== 'darwin') app.quit()

 })

 app.on('activate', function () {

   // On macOS it's common to re-create a window in the app when the

   // dock icon is clicked and there are no other windows open.

   if (mainWindow === null) createWindow()

 })

 // In this file you can include the rest of your app's specific main process

 // code. You can also put them in separate files and require them here.

其中的第16行是重点，否则使用process时会出现：process is not defined  的错误。

electron node.js 实现文件拖动读取文件的更多相关文章

  1. 在 Node.js 中处理大 JSON 文件

    在 Node.js 中处理大 JSON 文件 场景描述 问题一: 假设现在有一个场景,有一个大的 JSON 文件,需要读取每一条数据经过处理之后输出到一个文件或生成报表数据,怎么能够流式的每次读取一条 ...

  2. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  3. electron node.js 在 vscode 设置 调试 Debug

    在当前工程下,添加一个 .vscode/launch.json 文件 { // Use IntelliSense to learn about possible attributes. // Hove ...

  4. 文件_ _android从资源文件中读取文件流并显示的方法

    ======== 1   android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private ...

  5. PHP 上传文件和读取文件崎岖路

    今天php上传文件和读取文件没有搞出来,全靠后来大神来帮忙,总结一下:主要涉及到一下几个方面,在ubuntu下mkdir文件夹的时候要注意权限问题,一般情况下php是以一个较低的权限去执行的,所以如果 ...

  6. 【转】c# winform 创建文件，把值写入文件，读取文件里的值，修改文件的值，对文件的创建，写入，修改

    创建文件和读取文件的值 #region 判断文件是否存在,不存在则创建,否则读取值显示到窗体 public FormMain() { InitializeComponent(); //ReadFile ...

  7. 【Node.js】'readline' 逐行读取、写入文件内容

    [转]运用readline逐行读取的两种实现 效果图如下: 左边1.log 为源文件 右边1.readline.log为复制后的文件 下边为命令行输出 实现方式一: [javascript] view ...

  8. node.js 中的 fs （文件）模块

    记录 fs 模块的方法及使用 1. fs.stat 获取文件大小,创建时间等信息 // 引入 fs 模块 const fs = require('fs'); fs.stat('01.fs.js', ( ...

  9. Node.js核心模块API之文件操作

    参考:https://www.runoob.com/nodejs/nodejs-fs.html 异步I/O 1,文件操作 2,网络操作 在浏览器中也存在异步操作 1,定时任务 2,事件处理 3,Aja ...

随机推荐

  1. java上传1t文件

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用.此控件PC全平台支持包括mac,linux系统的文件上传,文章末尾将附上控件下载与教程链接 ...

  2. [bzoj] Network

    http://www.lydsy.com/JudgeOnline/problem.php?id=3732 /* Kruskal 最小生成树 树链剖分 最大值查询 注意:可能会有几块不联通的图 */ # ...

  3. C++类中静态数据成员MAP如何初始化

    conv_xxx.hpp class convolution { ... ... typedef std::map<int, std::string> ConvDtMap; static ...

  4. NetworkX系列教程(10)-算法之二:最小/大生成树问题

    小书匠 Graph 图论  重头戏部分来了,写到这里我感觉得仔细认真点了,可能在NetworkX中,实现某些算法就一句话的事,但是这个算法是做什么的,用在什么地方,原理是怎么样的,不清除,所以,我决定 ...

  5. vscode搭建springboot开发环境

    1. JDK,Maven 1.1 下载略 1.2 设置系统环境变量 jdk增加环境变量JAVA_HOME=C:\Program Files\Java\jdk1.8.0_191(安装路径) 增加路径Pa ...

  6. php rsa 非对称加解密类

    <?php header("Content-Type: text/html;charset=utf-8"); /* 生成公钥.私钥对,私钥加密的内容能通过公钥解密(反过来亦可 ...

  7. 页面性能优化：preload预加载静态资源

    本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执 ...

  8. Vue路由管理之Vue-router

    一.Vue Router介绍 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的. ...

  9. Hibernate---进度1

    关联映射:http://www.cnblogs.com/huxi/archive/2009/12/15/1624988.html 关联映射,hibernate查询方式:http://www.cnblo ...

  10. pytorch基础学习（二）

    在神经网络训练时,还涉及到一些tricks,如网络权重的初始化方法,优化器种类(权重更新),图片预处理等,继续填坑. 1. 神经网络初始化(Network Initialization ) 1.1 初 ...