如何使用jQuery的拖放事件来上传从桌面拖动的文件？ [英] How to use jQuery's drop event to upload files dragged from the desktop?

问题描述

是否可以使用jQuery的 drop 事件从桌面拖动文件？如果是这样，我能得到丢失的文件数据吗？

解决方案

这有点混乱（你至少需要处理3个事件），但是可能的。

首先，您需要为 dragover 和 dragenter

$ $ $''code> $（'＃div'）。on（
'dragover'，
函数（e）{
e.preventDefault（）;
e.stopPropagation（）;
}
）
$（ '（$ b $'dragenter'，
function（e）{
e.preventDefault（）;
e.stopPropagation（）;
}
）


然后您可以添加拖放处理程序并使用 e.originalEvent.dataTransfer.files ：

  $（'＃div'） .on（
'drop） （e.originalEvent.dataTransfer）{
 if（e.originalEvent.dataTransfer.files.length）{
 e.preventDefault（） ; 
 e.stopPropagation（）; 
 / * UPLOAD FILES HERE * / 
 upload（e.originalEvent.dataTransfer.files）; 
} 
} 
} 
）; 
  

现在您可以从div中的桌面/资源管理器/查找器中拖动文件并访问它们。

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

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?

解决方案

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

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();
    }
)

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){
            if(e.originalEvent.dataTransfer.files.length) {
                e.preventDefault();
                e.stopPropagation();
                /*UPLOAD FILES HERE*/
                upload(e.originalEvent.dataTransfer.files);
            }   
        }
    }
);

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

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

这篇关于如何使用jQuery的拖放事件来上传从桌面拖动的文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！