如何处理Electron Framework中的”拖放文件”功能

本文概述

处理拖放
关于Google Chrome浏览器中的此功能

拖放功能是选择一个对象的操作, 在这种情况下, 是将来自Operative系统的文件作为图像, 文本文件等, 然后将它们移动(拖动), 然后将其放置(放置)到另一个区域(在此(如果是文档的特定DOM元素)。
HTML5工作草案规范包括对拖放的支持, 因此我们不需要任何第三方Javascript库来实现此目的。拖放是改善用户体验的一项重要功能, 许多本地应用程序都可以使用此功能, 因此你可能希望将此功能实现到混合桌面应用程序中。
处理拖放如前所述, HTML5提供了对拖放的支持, 因此, 为了处理DOM元素中的拖放事件, 可以使用以下代码段：

< style> #drag-file {background-color: blue; color:white; text-align: center; width:300px; height:300px; }< /style> < div id="drag-file"> < p> Drag your files here< /p> < /div> < script> (function () {var holder = document.getElementById('drag-file'); holder.ondragover = () => {return false; }; holder.ondragleave = () => {return false; }; holder.ondragend = () => {return false; }; holder.ondrop = (e) => {e.preventDefault(); for (let f of e.dataTransfer.files) {console.log('File(s) you dragged here: ', f.path)}return false; }; })(); < /script>

我们将一些事件侦听器添加到所需的DOM元素中。它既可以是文档, 也可以是span元素。当用户将文件放在元素上时, 将触发ondrop事件。
请注意, 将ondragover, ondragleave和ondragend的返回值设置为false很重要, 以防止出现默认行为(例如, 使用图像时, 如果拖动图像, 则当前文档将消失并且将被图像替换, 并且你无法背部)。
files数组中的每个对象都具有以下结构：

{"lastModified": 1476893272627, "lastModifiedDate": "WedOct19 2016 18: 0 7: 52GMT+0200(Mitteleurop?ischeSommerzeit)", "name": "myfilename.png", "path": "C:\path-to\myfilename.png", "size": 10648, "type": "image/png", "webkitRelativePath": ""}

上一个代码片段的实现应具有以下结果：

文章图片
关于Google Chrome浏览器中的此功能如果你很专心, 则可能已经注意到此功能不需要任何内置或外部模块。因此, 如果可以像在浏览器中使用Javascript一样进行发布, 那么发布这篇文章有什么意义呢？答案很简单, 它也适用, 但是你不会收到相同的信息。
如果在支持这些事件的任何浏览器中执行显示的代码段, 则会发现该对象具有不同的结构：

{"lastModified": 1476893272627, "lastModifiedDate": "WedOct19 2016 18: 0 7: 52GMT+0200(Mitteleurop?ischeSommerzeit)", "name": "myfilename.png", "size": 10648, "type": "image/png", "webkitRelativePath": ""}

如你在Google Chrome浏览器或任何更新的浏览器中所看到的, 其中不包含path属性(文件的完整路径)。发生这种情况的原因是, 根据HTML5的规范, 如果使用JavaScript操作其值字符串, 则文件上传控件不应显示所选文件的真实本地路径。 Internet Explorer 8中已经实现了此要求-仅当包含控件的页面添加到浏览器的受信任网站集时, 才会显示文件的真实路径。
幸运的是, Electron不仅是Web浏览器, 因此它消除了此已知限制(某种程度上, 它不是限制, 而是一种安全功能, 在这种情况下我们不需要此功能, 因为桌面应用程序显然有权修改系统)。
【如何处理Electron Framework中的” 拖放文件” 功能】玩得开心！