Electron中实现拖拽⽂件进div中通过File对象获取⽂件的路径和
内容
场景
⽤HTML和CSS和JS构建跨平台桌⾯应⽤程序的开源库Electron的介绍以及搭建HelloWorld：
Electron怎样进⾏渲染进程调试和使⽤浏览器和VSCode进⾏调试：
在上⾯搭建好项⽬以及知道怎样进⾏调试后，需要实现将⽂件拖拽进div后获取⽂件的路径和内容。
注：
实现
⾸先打开index.html，添加⼀个div
<div class="for_file_drag" id="drag_test">
<h2>File对象</h2>
<span>往这⾥拖⽂件</span>
</div>
并给这个div添加⼀个id和样式，新建css⽂件夹并在⽂件夹下新建style.css
.for_file_drag {
width: 100%;
height: 400px;
background: pink;
}
给div添加⼀个宽度⾼度和背景⾊
然后在index.html中引⽤的js中
// File对象实例
const fs = require('fs');
//获取div对象
const dragWrapper = ElementById("drag_test");
//添加拖拽事件
dragWrapper.addEventListener("drop", (e) => {
//阻⽌默认⾏为
e.preventDefault();
//获取⽂件列表
const files = e.dataTransfer.files;
if(files && files.length > 0) {
//获取⽂件路径
const path = files[0].path;
console.log('path:', path);
//读取⽂件内容
const content = fs.readFileSync(path);
console.String());
}
})
//阻⽌拖拽结束事件默认⾏为
dragWrapper.addEventListener("dragover", (e) => {
e.preventDefault();
})
css和html和js怎么结合然后调试运⾏项⽬，然后往div中拖拽⼀个⽂件，然后打开控制台

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。