Javascript jquery中的文件拖放事件

我试图找到一种方法，让用户将单个文件拖放到我页面上的某个区域，然后可以将该区域与我的所有其他表单数据一起提交

在我的研究中，我发现了多个“拖放”上传脚本，但它们都做得太多了。我想自己处理实际的上传，只为用户提供一种不点击浏览按钮上传文件的方式

jquery（或类似的东西）中是否有我应该寻找的事件

---

非常感谢您的帮助

Plupload是一个jQuery插件，可以进行多文件上传，支持从桌面拖放HTML5。它很容易配置，检查

如果不需要上载功能，请查看以下内容：

（从桌面拖放并存储到本地存储中）

（jQuery FileDrop-HTML5拖放文件）

（HTML5） ,

---

我在研究一些AJAX文件上传技术时遇到了这个问题

今天我创建了一个拖放上传脚本（它仍处于概念验证阶段，但以下是我采取的基本步骤）

$('drag-target-selector').on('drop', function(event) {

 //stop the browser from opening the file
 event.preventDefault();

 //Now we need to get the files that were dropped
 //The normal method would be to use event.dataTransfer.files
 //but as jquery creates its own event object you ave to access 
 //the browser even through originalEvent.  which looks like this
 var files = event.originalEvent.dataTransfer.files;

 //Use FormData to send the files
 var formData = new FormData();

 //append the files to the formData object
 //if you are using multiple attribute you would loop through 
 //but for this example i will skip that
 formData.append('files', files[0]);

 }

现在，您可以通过php脚本或其他任何您想要使用的方式发送formData进行处理。我在脚本中没有使用jquery，因为它有很多问题，使用常规xhr似乎更容易。下面是代码

var xhr = new XMLHttpRequest();
    xhr.open('POST', 'upload.php');
    xhr.onload = function() {
            console.log(xhr.responseText);

    };


    xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                    var complete = (event.loaded / event.total * 100 | 0);
                    //updates a <progress> tag to show upload progress
                    $('progress').val(complete);

            }
    };

xhr.send(formData);

var xhr=new-XMLHttpRequest（）；
open（'POST'，'upload.php'）；
xhr.onload=函数（）{
console.log（xhr.responseText）；
};
xhr.upload.onprogress=函数（事件）{
if（事件长度可计算）{
var complete=（event.loaded/event.total*100 | 0）；
//更新标记以显示上载进度
$（'progress'）.val（完成）；
}
};
xhr.send（formData）；

jQuery File Upload（）是一个完整的库。OSS和MIT许可。我发现在Chrome中，只听“drop”不会捕获文件，只有在给定元素上同时听“dragover”和“drop”并在这两个事件上都做了.stopPropagation（）和.preventDefault（）时，它才会停止