blueimp jquery-fileupload异步上传多个文件
我正在使用jQuery文件上传库（ http://github.com/blueimp/jQuery-File-Upload ），我一直在搞清楚如何使用满足以下条件的库。
- 该页面具有由表单标记包围的多个文件输入字段。
- 用户可以将多个文件附加到每个输入字段
- 单击按钮时，所有文件都将发送到服务器，而不是在将文件附加到输入字段时。
- 上传是异步完成的
- 假设页面有3个输入字段，其名称属性为“file1 []”，“file2 []”和“file3 []”，请求有效负载应该像{file1：[file1 []上的文件数组]，file2 ：[file2 []]上的文件数组，…}
这是jsFiddle，它到目前为止表现得很奇怪，因为它发送了两次post请求，第一个被取消了。
更新
现在感谢@CBroe的评论，请求发送两次的问题是固定的。 但是，请求参数的键未正确设置。 这是更新的jsFiddle。
http://jsfiddle.net/BAQtG/27/
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} ) }) }) 有人知道如何让这个工作？
解决了。
小提琴： http ： //jsfiddle.net/BAQtG/29/
和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}); }) })
脚本触发的第一个POST请求会被取消，因为该按钮会提交表单（导致第二个POST请求）。
如果您不希望它具有提交function，请在button上使用type="button" 。
你必须添加一个return false; ， 如下所示：
$("button").click(function(){ file_upload.fileupload('send', {files:filesList} ) return false; })
或指定type="button"属性：
要设置formData ，请使用以下命令：
$("button").click(function () { file_upload.fileupload('send', { files: filesList, formData: { json: JSON.encode({ extra: 1 }) } }) })
特别是对于JSFiddle ，如果要在响应中获得extra值，则必须对其进行编码并将其分配给名为json的属性。
这是一个有效的例子。