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. Python2.7学习

    网上很多代码都不适用于python3版本,所以还是转回版本2来学习了 install 安装模块特别简单 E:\01_SOFT\Python27\python  -m easy_install sunb ...

  2. DEA使用git提交代码时，点了commit之后卡死在performing code analysis部分，或者performing code analysis结束后没有进入下一步操作。

    把"Perform code analysis" 和 "Check TODO" 复选框前面的勾去掉就好了. 这个可能是因为所分析的目标文件太大了,造成一直分析不 ...

  3. PHP全栈学习笔记28

    数据库Mysql概述,数据库操作,数据表操作,数据类型,管理数据库 order by asc; 升序 desc 降序 sql标准语言: 数据查询语言 select 数据定义语言 create/alte ...

  4. Python怎么测试异步接口

    当业务处理比较耗时时, 接口一般会采用异步处理的方式, 这种异步处理的方式又叫Future模式. 一般流程 当你请求一个异步接口,接口会立刻返回你一个结果告诉你已经开始处理,结果中一般会包含一个任务i ...

  5. RSYNC @ERROR: AUTH FAILED ON MODULE XXX 解决思路及附录RSYNC常见问题及解决办法

    使用rsync往服务器上传文件时,client报如下异常: @ERROR: auth failed on module XXX rsync error: error starting client-s ...

  6. nrm切换npm包源

    nrm可以随时切换npm包的源 npm install -g nrm 安装nrm完成 查看nrm源 nrm ls 切换源 npm use npm #也可以切换成其他源 

  7. Python JSON 字符串 转 json 基本使用

    字符串 转  json import json jsonData = '{"a":1,"b":2,"c":3,"d":4 ...

  8. group by 分组去重查询

    数据库中的数据是这样的: 想要看看有几种类型,可以用group by: select * from activiti.act_ru_task where PROC_INST_ID_ in (selec ...

  9. OpenJudge计算概论-成绩判断

    /*========================================================= 成绩判断 总时间限制: 1000ms 内存限制: 6000kB 描述 输入一个0 ...

  10. el-table的type="selection"的使用

    场景:el-table,type="selection"时,重新请求后,设置列表更新前的已勾选项 踩坑:在翻页或者changPageSize之后,table的data会更新,之前勾 ...