如何使用 jquery 或 JavaScript 在一次浏览中上传多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8137280/
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
how can I upload multiple files at a single browse using jquery or JavaScript
提问by Tokendra Kumar Sahu
I am developing a web application in which I have create a page for multiple file upload on a single browse not one file at a time.
我正在开发一个 Web 应用程序，在该应用程序中，我在一次浏览中创建了一个用于多个文件上传的页面，而不是一次一个文件。
User will be able to select multiple file on click on browse.
用户将能够在单击浏览时选择多个文件。
If some one have solution for this please welcome
如果有人对此有解决方案，请欢迎
Thanks!
谢谢！
回答by Harry S
For alternative solution, you can using HTML5 multiple-upload,
对于替代解决方案，您可以使用 HTML5 多重上传，
HTML
HTML
set attribute multiplefor your input-file, check this link https://developer.mozilla.org/en-US/docs/Web/API/Input.multiple
为您的输入文件设置多个属性，请检查此链接https://developer.mozilla.org/en-US/docs/Web/API/Input.multiple
<form id="form-upload">
<input type="file" name="upload" id="upload" multiple>
</form>
JS
JS
to upload file using juery, you can use form-data : https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
要使用 juery 上传文件，您可以使用表单数据：https: //developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
$('#upload').bind("change", function(){
var formData = new FormData($("#form-upload")[0]);
//loop for add $_FILES["upload"+i] to formData
for (var i = 0, len = document.getElementById('upload').files.length; i < len; i++) {
formData.append("upload"+(i+1), document.getElementById('upload').files[i]);
}
//send formData to server-side
$.ajax({
url : "process_upload.php",
type : 'post',
data : formData,
dataType : 'json',
async : true,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
error : function(request){
console.log(request.responseText);
},
success : function(json){
//place your code here
}
});
});
SERVER-SIDE(ex:PHP)
服务器端（例如：PHP）
//just print $_FILES
print_r($_FILES);
回答by Adam Holmes
Uploadifyis a very good JQuery Plugin for file upload.
Uploadify是一个非常好的用于文件上传的 JQuery 插件。
It's very easy to use too. From the docs:
它也很容易使用。从文档：
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'auto' : true
});
});
Then all you need in html is:
那么你需要在 html 中的所有内容是：
<input id="file_upload" name="file_upload" type="file" />
Obviously including the Uploadify scripts too.
显然也包括 Uploadify 脚本。
