electron 原生拖拽文件获取路径

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

我使用了jQuery，记得引用

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

创建一个元素，设置好ID

<div class="trts" id="content">
   <p>拖入文件读取数据</p>
</div>

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

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();必须写，这样才能接管浏览器默认的操作。