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

Question

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

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

http://www.dropzonejs.com/

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

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

为什么？

Answer 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();
}