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. Linux 文件系统缓存dirty_ratio与dirty_background_ratio两个参数区别

    文件系统缓存dirty_ratio与dirty_background_ratio两个参数区别 (2014-03-16 17:54:32) 转载▼ 标签: linux 文件系统缓存 cache dirt ...

  2. Linux文件系统属性权限chattr与lsattr命令

    有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的linux ...

  3. 初识QuartusII 9.0（破解，半加器的仿真，综合：上）

    由于在意大利期间,用的xilinx公司的ZYBO板子,相应的软件用ISE,SDK.回国买了altera公司的板子,自然也要学习国内较流行的软件(TB大西瓜家,因此相关例程也是大部分引用他家).Quar ...

  4. [Luogu] 货车运输

    https://www.luogu.org/problemnew/show/1967 kruskal + Lca #include <iostream> #include <cstd ...

  5. 问题：python3 使用beautifulSoup时，出错UnicodeDecodeError: 'gbk' codec …….

    想将html文件转为纯文本,用Python3调用beautifulSoup 超简单的代码一直出错,用于打开本地文件: from bs4 import BeautifulSoup file = open ...

  6. Python测试框架对比

    如有任何学习问题,可以添加作者微信:lockingfree 更多学习资料请加QQ群: 822601020获取 unittest, pytest, nose, robot framework对比 什么是 ...

  7. yum安装错误记录

    原因:使用yum安装libvirt以后,后续没有使用yum -remove 包名去移除这个包,接着使用源码安装了libvirt服务,当我卸载源码安装的libvirt以后,通过yum重新安装libvir ...

  8. java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the server

    错误信息 java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents ...

  9. linux pip install gdal apyt-get install libgdal-dev export cplus_path=/usr/include/gdal export c_path=/usr/include/gdal

    apt-get install libgdal-dev pip install gdal

  10. NTC热敏电阻温度计算方法，Steinhart-Hart方程和B值法（转）

    NTC热敏电阻计算器使用方法 NTC热敏电阻计算器 V1.0 10K负温度系数热敏电阻(NTC)温度与阻值对应关系表 Rt = R(25℃)*EXP[B*(1/T - 1/(T+25))] 说明: 1 ...