通过blueimp jquery-fileupload异步上传多个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19807361/
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
Uploading multiple files asynchronously by blueimp jquery-fileupload
提问by Ryo
I'm using jQuery File Upload library (http://github.com/blueimp/jQuery-File-Upload), and I've been stuck figuring out how to use the library satisfying the following conditions.
我正在使用 jQuery 文件上传库 ( http://github.com/blueimp/jQuery-File-Upload)，并且我一直在弄清楚如何使用满足以下条件的库。
- The page has multiple file input fields surrounded by a form tag.
- Users can attach multiple files to each input field
- All files are sent to a server when the button is clicked, not when files are attached to the input fields.
- Upload is done asynchronously
- Say the page has 3 input fields with their name attributes being "file1[]", "file2[]" and "file3[]", the request payload should be like {file1: [ array of files on file1[] ], file2: [ array of files on file2[] ], ...}
- 该页面有多个文件输入字段，由一个表单标签包围。
- 用户可以将多个文件附加到每个输入字段
- 单击按钮时，所有文件都会发送到服务器，而不是将文件附加到输入字段时。
- 上传是异步完成的
- 假设页面有 3 个输入字段，它们的名称属性为“file1[]”、“file2[]”和“file3[]”，请求负载应该类似于 {file1: [file1[] 上的文件数组], file2 : [file2[] 上的文件数组], ...}
Here's jsFiddle, it's behaving weird so far in that it sends post request twice and the first one is cancelled.
这是 jsFiddle，到目前为止它的行为很奇怪，因为它发送了两次 post 请求，而第一个被取消了。
Updates
更新
Now thanks to @CBroe 's comment, the issue that request is sent twice is fixed. However the keys of request parameter is not correctly set. Here's updated jsFiddle.
现在感谢@CBroe 的评论，请求被发送两次的问题得到解决。但是请求参数的键没有正确设置。这是更新的 jsFiddle。
The core part of js code looks like this.
js代码的核心部分是这样的。
$(document).ready(function(){
var filesList = []
var elem = $("form")
file_upload = elem.fileupload({
formData:{extra:1},
autoUpload: false,
fileInput: $("input:file"),
}).on("fileuploadadd", function(e, data){
filesList.push(data.files[0])
});
$("button").click(function(){
file_upload.fileupload('send', {files:filesList} )
})
})
Anybody have idea how to get this to work?
有人知道如何让这个工作吗？
回答by Ryo
Solved.
解决了。
Fiddle: http://jsfiddle.net/BAQtG/29/
小提琴：http: //jsfiddle.net/BAQtG/29/
And js code
和js代码
$(document).ready(function(){
var filesList = [],
paramNames = [],
elem = $("form");
file_upload = elem.fileupload({
formData:{extra:1},
autoUpload: false,
fileInput: $("input:file"),
}).on("fileuploadadd", function(e, data){
filesList.push(data.files[0]);
paramNames.push(e.delegatedEvent.target.name);
});
$("button").click(function(e){
e.preventDefault();
file_upload.fileupload('send', {files:filesList, paramName: paramNames});
})
})
回答by CBroe
The first POST request triggered by your script gets canceled, because the button submitsthe form (causing the second POST request).
脚本触发的第一个 POST 请求被取消，因为按钮提交了表单（导致第二个 POST 请求）。
Use type="button"on the buttonif you don'twant it to have submit functionality.
使用type="button"的button，如果你不希望它有提交的功能。
回答by Alex Filipovici
You have to either add a return false;, as shown below:
您必须添加一个return false;，如下所示：
$("button").click(function(){
file_upload.fileupload('send', {files:filesList} )
return false;
})
or specify the type="button"attribute:
或指定type="button"属性：
<button type="button">send by fileupload send api</button>
In order to set the formData, use the following:
要设置formData，请使用以下命令：
$("button").click(function () {
file_upload.fileupload('send', {
files: filesList,
formData: {
json: JSON.encode({
extra: 1
})
}
})
})
Specifically for JSFiddle, if you want to get the extravalue in the response, you have to encode it and assign it to a property named json.
特别是对于JSFiddle，如果您想获取extra响应中的值，则必须对其进行编码并将其分配给名为json.
Here's a working example.
这是一个工作示例。
