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管理员

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

本月创作热力图

最新评论
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?
风起云涌
风起云涌
6月17日
前台投稿现在有点太抽象了 希望可以弄成那种分区填写的 标题,内容,图片,目录,标签,这样的
评论于留言建议