如何处理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浏览器, 因此它消除了此已知限制(某种程度上, 它不是限制, 而是一种安全功能, 在这种情况下我们不需要此功能, 因为桌面应用程序显然有权修改系统)。

玩得开心 ！