electron获取被拖拽文件的路径信息

本文转载自:https://newsn.net/

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

electron如何获取被拖拽文件的路径信息?

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

加载jquery

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

electron如何获取被拖拽文件的路径信息?

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

开启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>

核心代码

本文基于electron-quick-start:

禁用nodeIntegration,禁用preload:

main.js:

function createWindow () {

mainWindow = new BrowserWindow({

//...

webPreferences: {

nodeIntegration:false,

//preload: path.join(__dirname, 'preload.js')

}

})

}

electron如何获取被拖拽文件的路径信息?

接下来就需要修改index.html文件。主要任务就是:定义一个可以接收drop事件的div。代码如下:

<div id="holder" class="holder">

拖拽文件至此

</div>

<script>

var holder=$("#holder");

holder.on("drop",function(event){

event.preventDefault();

var efile=event.originalEvent.dataTransfer.files[0];

holder.html(efile.path);

return false;

});

</script>

electron如何获取被拖拽文件的路径信息?

大家可以看到,在drop事件中,先使用event.preventDefault();语句,避免了打开被拖拽的文件,关于这个事件,可以参考下面的文章:

被拖拽的文件路径信息

获得被拖拽的文件路径信息的方法是:

event.originalEvent.dataTransfer.files[0].path;

注意:

增益辅助

下面的内容,是增益辅助部分,有的话更好,没有也不影响功能。这里定义了两个css样式。

.holder{

min-height: 200px;

background: #eee;

margin:2em;

padding:1em;

border:0px dotted #eee;

border-radius: 10px;

transition:.3s all ease-in-out;

}

.holder-ondrag{

border:20px dotted #d45700;

}

electron如何获取被拖拽文件的路径信息?

监控dragenter dragover事件,切换移动选区的样式为over样式。

holder.on("dragenter dragover",function(event){

event.preventDefault();

holder.addClass("holder-ondrag");

holder.text("松开鼠标");

});

electron如何获取被拖拽文件的路径信息?

监控dragleave mouseleave事件,切换移动选区的样式为普通样式。

holder.on("dragleave mouseleave",function(event){

event.preventDefault();

holder.removeClass("holder-ondrag");

holder.text("拖拽文件至此");

});

最终效果图

electron如何获取被拖拽文件的路径信息?

electron如何获取被拖拽文件的路径信息?

electron如何获取被拖拽文件的路径信息?

原生写法

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

var holder=document.getElementById("holder");

holder.ondrop=function(event){

event.preventDefault();

holder.innerText=event.dataTransfer.files[0].path;

}

总结

electron如何获取被拖拽文件的路径信息?本文给出了您一个可能的答案。在实际应用中,还可能碰到的问题很多。

以上是 electron获取被拖拽文件的路径信息 的全部内容, 来源链接: utcz.com/a/118764.html

回到顶部