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

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

本月创作热力图

最新评论
西风
西风
3月7日
暂时不需要也能跑
Kevin
Kevin
3月6日
请教,小网站,1000ip不到,小主机,2c4g,到底 redis 还是 macached 合适啊
hfloke
hfloke
3月1日
新版本安装更新后,页面有问题哦
丙氨酸
丙氨酸
2月27日
测试
评论于关于本站
RiseForever
RiseForever
2月23日
听说新主题发布了,来测试下评论区。