Javascript jquery中的文件拖放事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6604622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File drag and drop event in jquery
提问by Jon
I'm trying to find a way of letting users drag and drop individual files into an area on my page that can then get submitted along with all my other form data.
我试图找到一种方法让用户将单个文件拖放到我页面上的一个区域，然后可以与我的所有其他表单数据一起提交。
In my research I've found multiple "drag and drop" upload scripts but they all do way, way too much. I want to handle the actual uploading myself and just provide a way for users to upload files without hitting the browsebutton.
在我的研究中，我发现了多个“拖放”上传脚本，但它们都做得太多了。我想自己处理实际的上传，只是为用户提供一种无需点击浏览按钮即可上传文件的方法。
Is there an event in jquery (or something similar) that I should be looking for?
jquery（或类似的东西）中是否有我应该寻找的事件？
Any help is much appreciated!
任何帮助深表感谢！
回答by Paul Mulgrew
I came across this question while researching some AJAX file upload techniques.
我在研究一些 AJAX 文件上传技术时遇到了这个问题。
I created a drag and drop upload script today (its still in proof of concept stage but heres the basic steps that I took.
我今天创建了一个拖放上传脚本（它仍处于概念验证阶段，但这是我采取的基本步骤。
$('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]);
}
now you can send formData to be processed by a php script or whatever else you want to use. I didn't use jquery in my script as there a lot of issues with it it seemed easier to use regular xhr. Here is that code
现在您可以发送 formData 以供 php 脚本或您想使用的任何其他内容处理。我没有在我的脚本中使用 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);
回答by Panos Kal.
Pluploadis a jQuery plugin to do multifile upload and has HTML 5 drag/drop from desktop supported. Its easy to configure, check http://www.plupload.com/example_queuewidget.php
Plupload是一个用于多文件上传的 jQuery 插件，支持从桌面拖放 HTML 5。它易于配置，请查看http://www.plupload.com/example_queuewidget.php
If you don't want upload functionality, check out the following:
如果您不想要上传功能，请查看以下内容：
(Drag and drop from desktop and store into local storage) http://jsdo.it/hirose31/7vBK
（从桌面拖放并存储到本地存储） http://jsdo.it/hirose31/7vBK
(jQuery FileDrop - HTML5 Drag 'n Drop Files) https://github.com/weixiyen/jquery-filedrop
（jQuery FileDrop - HTML5 拖放文件） https://github.com/weixiyen/jquery-filedrop
(HTML5) http://www.html5rocks.com/en/features/file, http://xquerywebappdev.wordpress.com/2010/05/21/drag-n-drop-from-desktop-jquery-plugin/
( HTML5) http://www.html5rocks.com/en/features/file, http://xquerywebappdev.wordpress.com/2010/05/21/drag-n-drop-from-desktop-jquery-plugin/
