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

是否可以使用jQuery的drop事件从桌面拖动文件？

如果是这样，我如何获取删除的文件数据？

有点混乱（您需要处理至少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中的桌面/浏览器/查找器中拖动文件并访问它们。

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