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

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

本月创作热力图

最新评论
Mr.C
Mr.C
4月12日
个人建议,下个版本考虑将下载地址加密(防止采集)
Felix
Felix
4月1日
你好我想请教一下,为什么我php和redis都安装了,还是连接不上,一直显示未安装,旧插件文件也清理了
Mike
Mike
4月1日
当前页跳转一个页面,然后回退上一页,顶部进度条会缓慢加载,并且加载不完
评论于留言建议
Mike
Mike
4月1日
文章页划到最底部,侧边栏中切换作者发言会溢出
评论于留言建议
陇安辞
陇安辞
3月31日
guzhang
评论于关于本站