从 Chrome 下载栏中拖放文件上传

Posted 2023-03-04

【中文标题】从 Chrome 下载栏中拖放文件上传

【英文标题】：Drag and Drop File Uploads from Chrome Downloads Bar

【发布时间】：2013-10-31 19:53:21

【问题描述】：

我已经成功地使用 html 5 为 Web 应用程序实现拖放文件上传。我监听 drop 事件，然后从 event.dataTransfer 属性中获取文件数据。

出于所有意图和目的，它的工作方式与 dropzone.js 完全相同：

http://www.dropzonejs.com/

但由于某种原因，我无法从 Chrome 下载栏中拖放文件。

dragenter、dragover 和 dragleave 事件会触发，但不会触发 drop 事件。这可以使用 dropzone.js 演示网站可靠地重现。

为什么？

【问题讨论】：

显然 dropzone.js（和您的代码）当时没有正确处理 DnD 事件。它在我维护的上传库Fine Uploader 中运行良好。您可以使用现场演示在主页上亲自尝试。 Fine Uploader的DnD代码可以在库的dnd.js source file中找到，供参考。

酷我去看看

这似乎是一个 Chrome 错误。见code.google.com/p/chromium/issues/detail?id=234931&

【参考方案1】：

诀窍在于，默认情况下，传递给dragover 的event.dataTransfer 的dropEffect 属性默认设置为'none'。您需要检测到这一点，并将其设置为复制或移动，具体取决于用例。

对我来说，将其设置为复制有效。我不必对drop 事件做任何事情。只是对dragover 事件的修改。

这就是我所做的：

// The dragover event
function onDragover(e) 
    if (e.originalEvent) 
        e = e.originalEvent;
    

    if (!e.dataTransfer) 
        return;
    

    // Code I added begins here
    var b = e.dataTransfer.effectAllowed;

    e.dataTransfer.dropEffect = ('move' === b || 'linkMove' === b) ? 'move' : 'copy';
    // Code I added ends here

    this.$el.addClass('dragging');

    e.stopPropagation();
    e.preventDefault();

【讨论】：

一些有趣的阅读：quirksmode.org/blog/archives/2009/09/the_html5_drag.html