electron获取被拖拽文件的路径信息
本文转载自:https://newsn.net/
春风吹,战鼓擂,小伙伴们谁怕谁?大家每天都要努力,每天都要进步一点点。本文中,苏南大叔给大家带来的教程是:electron
如何获取被拖拽文件的路径信息。本文的大部分代码,对于普通网页也有借鉴意义。但是关键的获取路径部分,只能在electron
中跑通,在普通网页中,是不能获取的。
本文的测试环境:mac
。本文基于electron-quick-start
修改,主体代码不需要开启nodeIntegration
。但是,如果您非要使用require
语句的话,请记得修改nodeIntegration
为true
。
加载jquery
本文中的写法,基于jquery
。众所周知,在electron
中,开启nodeIntegration
的话,就可以使用require
语句,但是会和传统的jquery
加载方式冲突。所以,您可以参考下面的链接,来解决这个问题:
这里苏南大叔提供两个快速答案:
开启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')
}
})
}
接下来就需要修改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>
大家可以看到,在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;
}
监控dragenter dragover
事件,切换移动选区的样式为over
样式。
holder.on("dragenter dragover",function(event){event.preventDefault();
holder.addClass("holder-ondrag");
holder.text("松开鼠标");
});
监控dragleave mouseleave
事件,切换移动选区的样式为普通样式。
holder.on("dragleave mouseleave",function(event){event.preventDefault();
holder.removeClass("holder-ondrag");
holder.text("拖拽文件至此");
});
最终效果图
原生写法
下面的是个不用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