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

时间:2023-02-25
本文介绍了如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

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 个事件)但可能.

It's a little messy (you need to handle at least 3 events) but possible.

首先,您需要为 dragoverdragover 添加事件处理程序,并阻止这些事件的默认操作:

First, you need to add eventhandlers for dragover and dragenter and prevent the default actions for these events like that:

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

在这些事件上调用 preventDefault 实际上很重要,否则,某些浏览器可能永远不会触发 drop 事件.

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

然后您可以添加 drop-handler 并使用 e.originalEvent.dataTransfer.files 访问已删除的文件:

Then you can add the drop-handler and access the dropped files with 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 中的桌面/资源管理器/查找器中拖动文件并访问它们.

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

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

这篇关于如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:将图像拖放到 Chrome 中的 contenteditable 到光标处 下一篇:除非处理了拖动,否则 HTML5 放置事件不起作用

相关文章

最新文章