Javascript 如何使用jQuery'；s 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中的desktop/explorer/finder拖动文件并访问它们

---

为什么需要禁止默认的dragover和dragenter行为的可能重复？当您开始将文件拖到浏览器中时，某些浏览器会做一些奇怪的事情。其实没必要。通过这些事件，您还可以添加一些不错的功能，例如突出显示必须放置文件的div。是否可以使用e.originalEvent.dataTransfer.files并将其设置为文件输入？您说过“不容易”。。。？你的回答立刻解决了我同样的问题@loostro：可能的情况是有一个名为“file”的“全局”变量，并使用$（':file'）.change（）i.c.w.e.target.files[0]（适用于我），或者可能是$（'this'）.val（）；除了“某些浏览器会做一些奇怪的事情”：如果你在拖动图像文件时错过了拖动目标，某些浏览器（如Firefox）的默认行为是在窗口中打开文件。要避免这种情况，请将文档正文绑定到dragover并删除事件，然后取消它们（使用preventDefault/StopperPagation）。