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

 

上一篇 IDEA Maven仓库配置
下一篇 WordPress 粘贴图片上传插件
目录
applek

applek管理员

个人说明在个人中心里面设置

本月创作热力图

最新评论
hui
hui
8月19日
能否支持微信第三方登录啊?
Fiee
Fiee
7月21日
我网站基本上都装了,速度确实有所提升,还免费。我不喜欢白嫖,加你QQ没同意,网站也没有打赏通道 想支持一下的。
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?