javascript js拖拽 - 如何使用jQuery的drop事件上传从桌面拖出的文件?




js文件拖拽上传 js拖拽库 (2)

它有点乱(你需要处理至少3个事件)但可能。

首先,您需要为dragoverdragenter添加事件dragover ,并阻止这些事件的默认操作:

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

然后,您可以添加drop-handler并使用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/

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

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


Underscore.js可用于解决多个浏览器的问题。 它使用内置浏览器方法(如果存在)。 如果它们不存在,就像旧的Internet Explorer版本一样,它使用自己的自定义方法。

从数组中删除元素的简单示例(来自网站):

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]




javascript jquery html5 drag-and-drop