拖拽获取文件路径html,Lovestu - electron 原生拖拽文件获取路径

实现拖入文件获取路径，不用官方提供的消息模式，使用HTML5原生的拖放获取即可。

我使用了jQuery，记得引用

引用方法，在程序目录，运行命令：npm install jquery --save

创建一个元素，设置好ID

拖入文件读取数据

接下来在渲染进程中写代码

var content = $("#content")

content.on("dragenter dragover", function (event) {

// 重写ondragover 和 ondragenter 使其可放置

event.preventDefault();

});

content.on("dragleave", function (event) {

event.preventDefault();

});

content.on("drop", function (event) {

// 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

event.preventDefault();

var efile = event.originalEvent.dataTransfer.files[0];

console.log(efile.path, "utf8");

return false;

});

其中，主要的是drop方法中，获取到数组，默认只获取一个，如果要获取多个拖入文件，直接遍历event.originalEvent.dataTransfer.files即可。

上面两个方法是鼠标文件拖入，或者离开时的操作，可以默认为空，但是event.preventDefault();必须写，这样才能接管浏览器默认的操作。