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

小开

最佳答案

这有点混乱(您至少需要处理3个事件) ，但是可能会出现这种情况。

首先，您需要为 dragover和 dragenter添加事件处理程序，并防止这些事件的默认操作，比如:

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

对这些事件调用 preventDefault实际上很重要，否则，有些浏览器可能永远不会触发 drop事件。

然后您可以添加下拉处理程序，并使用 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);
}
}
);

现在您可以从 div 中的桌面/Explorer/finder 中拖动文件并访问它们。

Http://jsfiddle.net/fsa4n/5/