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

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

加载jquery

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

• https://newsn.net/say/electron-jquery.html

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

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

• https://github.com/electron/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();语句，避免了打开被拖拽的文件，关于这个事件，可以参考下面的文章：

• https://newsn.net/say/electron-disable-drag.html

被拖拽的文件路径信息

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

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

注意：

• 上述代码，在普通网页中，无法获取路径信息。
• 上述代码中的event，是jquery包装过的event，而event.originalEvent.才是原版的event。

增益辅助

下面的内容，是增益辅助部分，有的话更好，没有也不影响功能。这里定义了两个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如何获取被拖拽文件的路径信息？本文给出了您一个可能的答案。在实际应用中，还可能碰到的问题很多。这个时候，您可以参考苏南大叔的博客文章，来解决更多的问题：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。