如何使用 jQuery 的 drop 事件上传从桌面拖动的文件

发布于03月03日

Is it possible to use jQuery's drop event for dragging files from the desktop?

If so, how do I get the dropped file data?

推荐答案

这有点混乱(你至少需要处理3个事件)，但这是可能的.

首先，您需要为dragover和dragenter添加Eventhandler，并阻止这些事件的默认操作，如下所示:

$('#div').on(
    'dragover',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)
$('#div').on(
    'dragenter',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)

It's actually important to call preventDefault on these events, otherwise, some browsers may never trigger the drop event.

然后，您可以添加拖放处理程序，并使用e.originalEvent.dataTransfer.files访问拖放的文件:

$('#div').on(
    'drop',
    function(e){
        if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            /*UPLOAD FILES HERE*/
            upload(e.originalEvent.dataTransfer.files);
        }
    }
);

Now you are able to drag files from the desktop/explorer/finder in the div and access them.

http://jsfiddle.net/fSA4N/5/