javascript - 通过blueimp jquery-fileupload异步上传多个文件

Question

我正在使用 jQuery 文件上传库 ( http://github.com/blueimp/jQuery-File-Upload )，我一直在弄清楚如何使用满足以下条件的库。

• 该页面有多个文件输入字段，周围有一个表单标签。
• 用户可以将多个文件附加到每个输入字段
• 单击按钮时所有文件都会发送到服务器，而不是将文件附加到输入字段时。
• 异步上传
• 假设页面有 3 个输入字段，它们的名称属性分别为“file1[]”、“file2[]”和“file3[]”，请求有效负载应该类似于 {file1: [ array of files on 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} )
    })

})

有人知道如何让它工作吗？

Answer 1

已解决。

fiddle : 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});
    })
})