新建render/index.js
// html5拖放api：http://www.runoob.com/jsref/event-ondragover.html /* 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 */ var fs=require('fs'); var content=document.querySelector('#content'); content.ondragenter=content.ondragover=content.ondragleave=function(){ return false; /*阻止默认行为*/ } content.ondrop=function(e){ //阻止默认行为 e.preventDefault(); console.log(e.dataTransfer.files[0]); var path=e.dataTransfer.files[0].path; fs.readFile(path,'utf-8',(err,data)=>{ if(err){ console.log(err); return false; } content.innerHTML=data; }) }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .content{ width: 100%; height: 400px; background: orange; overflow-y: auto; } </style> </head> <body> <div class="content" id="content"> </div> <script src="renderer/index.js"></script> </body> </html>
运行项目：
npm run start