春风吹,战鼓擂,小伙伴们谁怕谁?大家每天都要努力,每天都要进步一点点。本文中,苏南大叔给大家带来的教程是:electron如何获取被拖拽文件的路径信息。本文的大部分代码,对于普通网页也有借鉴意义。但是关键的获取路径部分,只能在electron中跑通,在普通网页中,是不能获取的。

苏南大叔:electron如何获取被拖拽文件的路径信息? - electron-get-drop-path
electron如何获取被拖拽文件的路径信息?(图9-1)

本文的测试环境:mac/electron@5.0.3。本文基于electron-quick-start修改,主体代码不需要开启nodeIntegration。但是,如果您非要使用require语句的话,请记得修改nodeIntegrationtrue

加载jquery

本文中的写法,基于jquery。众所周知,在electron中,开启nodeIntegration的话,就可以使用require语句,但是会和传统的jquery加载方式冲突。所以,您可以参考下面的链接,来解决这个问题:

苏南大叔:electron如何获取被拖拽文件的路径信息? - js-jquery
electron如何获取被拖拽文件的路径信息?(图9-2)

这里苏南大叔提供两个快速答案:

开启nodeIntegration

开启nodeIntegration的话,先执行npm i jquery,然后代码中用下面这种方式加载:

window.$ = window.jQuery = require('jquery');

不开启nodeIntegration

不开启nodeIntegration的话,这个好办,传统的jquery加载写法即可,不用和这require语句纠缠不清。

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

原生写法

下面的是个不用jquery的原生写法,仅供参考。

var holder=document.getElementById("holder");
holder.ondrop=function(event){
    event.preventDefault();
    holder.innerText=event.dataTransfer.files[0].path;
}

总结

electron如何获取被拖拽文件的路径信息?本文给出了您一个可能的答案。在实际应用中,还可能碰到的问题很多。这个时候,您可以参考苏南大叔的博客文章,来解决更多的问题:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: