更新

Question

我正在使用jQuery文件上传库（http://github.com/blueimp/jQuery-File-Upload），而且我一直在考虑如何使用满足以下条件的库。

该页面包含多个由表单标记包围的文件输入字段。
用户可以将多个文件附加到每个输入字段
单击按钮时，所有文件都将发送到服务器，而不是将文件附加到输入字段时。
上传是异步完成的
假设页面有3个输入字段，其名称属性为“file1 []”，“file2 []”和“file3 []”，请求有效负载应该像{file1：[file1 []上的文件数组]，file2：[file2 []]上的文件数组，...}

这是jsFiddle，它到目前为止表现得很奇怪，因为它发送了两次post请求，第一个被取消了。

更新

现在感谢@CBroe的评论，请求发送两次的问题是固定的。但是，请求参数的键未正确设置。这是更新的jsFiddle。

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

解决。

小提琴： 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});
    })
})

Answer 2

脚本触发的第一个POST请求被取消，因为按钮提交表单（导致第二个POST请求）。

如果您希望它具有提交功能，请在type="button"上使用button。

Answer 3

您必须添加return false;，如下所示：

$("button").click(function(){
    file_upload.fileupload('send', {files:filesList} )
    return false;
})

或指定type="button"属性：

<button type="button">send by fileupload send api</button>

要设置formData，请使用以下命令：

$("button").click(function () {
    file_upload.fileupload('send', {
        files: filesList,
        formData: {
            json: JSON.encode({
                extra: 1
            })
        }
    })
})

特别是对于 JSFiddle ，如果要在响应中获取extra值，则必须对其进行编码并将其分配给名为json的属性。

Here是一个有效的例子。

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

更新

3 个答案: