从Chrome下载栏拖放文件上传

Question

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

对于所有意图和目的,它的工作原理与dropzone.js完全相同:

http://www.dropzonejs.com/

但是,出于某种原因,我无法从Chrome下载栏拖放文件.

dragenter,dragover和dragleave事件触发,但没有掉落事件触发.这可以使用dropzone.js演示网站可靠地重现.

为什么？

Answer 1

诀窍是默认情况下,传递给的dropEffect属性默认设置为.您需要检测到这一点,并将其设置为复制或移动,具体取决于用例.event.dataTransferdragover'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();
}