在从桌面上传文件时使用jquery .on来删除事件？ [英] using jquery .on for drop events when uploading files from the desktop?

问题描述

是否可以使用jquery .on（drop）事件从桌面拖动文件？
如果是，如何获取丢失的文件信息？

任何帮助非常感谢。

解决方案

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

首先，你需要添加事件处理程序 dragover 和 dragenter ，并阻止这些事件的默认操作：

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

然后，您可以添加下拉列表并使用 e.originalEvent.dataTransfer.files 访问已删除的文件：

  $（'＃div'）。on（
'drop'，
 function（e）{
 if（e.originalEvent.dataTra nsfer）{
 if（e.originalEvent.dataTransfer.files.length）{
 e.preventDefault（）; 
 e.stopPropagation（）; 
 / *上传文件* / 
 upload（e.originalEvent.dataTransfer.files）; 
} 
} 
} 
）; 
  

现在，您可以从div中的desktop / explorer / finder拖动文件并访问它们。

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

Is it possible to use jquery .on("drop") event for dragging files from the desktop?. If so how do I get the dropped file info?

Any help much appreciated.

解决方案

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 .on来删除事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！