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. （转）代码审计利器-RIPS实践

    一.代码审计工具介绍 代码审计工具可以辅助我们进行白盒测试,大大提高漏洞分析和代码挖掘的效率. 在源代码的静态安全审计中,使用自动化工具辅助人工漏洞挖掘,一款好的代码审计软件,可以显著提高审计工作的效 ...

  2. grafana+mysql忘记admin密码解决方法

    通过mysql修改admin的密码. 我之前注册了一个用户,所以我直接复制lvusyy这个用户的密码即可. update user inner join (select password,salt,r ...

  3. JavaEE三层架构与MVC

    JavaEE三层架构与MVC 摘要与总结 等下总结下 MVC模式 Model1 ​ 说到设计模式,不得不提一下之前的的Model1.据说早期对于java企业项目的开发,用的是Jsp+JavaBean的 ...

  4. 10月清北学堂培训 Day 3

    今天是钟皓曦老师的讲授~ zhx:题很简单,就是恶心一些qwq~ T1 别人只删去一个字符都能AC,我双哈希+并查集只有40?我太菜了啊qwq 考虑到越短的字符串越难压缩,越长的字符串越好压缩,所以我 ...

  5. codeforces193B

    CF193B Xor sol:发现好像非常不可做的样子,发现n,u都很小,大胆dfs,因为异或偶数次毫无卵用,只要判每次是否做2操作就是了,复杂度O(可过) #include <bits/std ...

  6. WebSocket浅谈

    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速 ...

  7. c++比例-libcurl多线程并发时的core【转载】

    转自: https://www.cnblogs.com/edgeyang/articles/3722035.html 浅析libcurl多线程安全问题 背景:使用多线程libcurl发送请求,在未设置 ...

  8. ROC与AUC的定义与使用详解

    分类模型评估: 指标 描述 Scikit-learn函数 Precision 精准度 from sklearn.metrics import precision_score Recall 召回率 fr ...

  9. ArcGIS10.3_解决属性表中文乱码问题

    借鉴前辈们解决ArcMap低版本属性表乱码的问题解决方法,勇敢的尝试了一下Pro中的解决方法,其实道理都一样.先来看看第一种方法:打开CMD,如果是ArcMap,输入如下命令: reg add HKE ...

  10. 制作A4纸打印的网页像素大小设置(转)

    公司内做系统,要用A4纸打印东西,A4纸标准时mm,换算成像素不知道.网上找找,找到一篇文章,转一下,备用. A4纸的尺寸是210mm*297mm,也就是21.0cm*29.7cm,而1英寸=2.54 ...