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. 块状链表 codevs 2333弹飞绵羊

    块状链表,分块处理,先预处理每一个点跳到下一个块 跳到哪,步数.然后修改的时候,修该那一个块即可 #include<cstdio>#include<cmath>int a[20 ...

  2. ZOJ2314 Reactor Cooling(无源汇上下界可行流)

    The terrorist group leaded by a well known international terrorist Ben Bladen is buliding a nuclear ...

  3. java23种设计模式等等。。

    23种设计模式http://www.cnblogs.com/maowang1991/archive/2013/04/15/3023236.html 提升Java代码性能和安全性https://blog ...

  4. 数据结构实验之图论九：最小生成树 （SDUT 2144）

    #include<bits/stdc++.h> using namespace std; typedef long long ll; struct node { int s, e; int ...

  5. imu 返回的数据

    Cheader: seq: 423038 stamp: secs: 1562058492 nsecs: 992359716 frame_id: imuorientation: x: 0.0026971 ...

  6. [bzoj 1861][zjoi2006] 书架

    传送门 Description 1． Top S--表示把编号为S的书放在最上面. 2． Bottom S--表示把编号为S的书放在最下面. 3． Insert S T--T∈{-1,0,1},若编号 ...

  7. CF1174F Ehab and the Big Finale(交互+剖分)

    做法 \(x\)为隐藏节点,\(dep_x=d(1,x)\) \((1)\):\(u=1\) \((2)\):重链剖分,比如\(v\)为\(u\)的重链底部,查询\(dis(x,v)\)的长度,\(y ...

  8. PHP开发高可用高安全App后端☆

    第1章 本章先讲解课程所含技术点,并演示相关的项目,让小伙伴对课程有个初步的认知,然后再带领小伙伴进行功能的分析,表的ER总关系图 第2章本章主要讲解课程的一些准备工作知识.包括工具.环境.模板等. ...

  9. EASYUI赋值和取值

       $("#ajname").textbox("setValue",name);      $("#jyzjg").combobox(&q ...

  10. 爬虫前提——正则表达式语法以及在Python中的使用

    正则表达式是用来处理字符串的强大工具,他并不是某种编程云. 正则表达式拥有独立的承受力引擎,不管什么编程语言,正则表达式的语法都是一样的. 正则表达式的匹配过程 1.一次拿出表达式和文本中的字符比较. ...