Javascript 通过blueimp jquery fileupload异步上载多个文件

我正在使用jQuery文件上载库（），我一直在琢磨如何使用满足以下条件的库

• 该页面有多个文件输入字段，周围有一个表单标记
• 用户可以将多个文件附加到每个输入字段
• 单击按钮时，所有文件都会发送到服务器，而不是将文件附加到输入字段时
• 上传是异步完成的
• 假设页面有3个输入字段，其名称属性分别为“file1[]”、“file2[]”和“file3[]”，请求负载应该类似于{file1:[file1[]上的文件数组]，file2:[file2[]上的文件数组，…}

这里是JSFIDLE，它的行为非常奇怪，它发送了两次post请求，第一次被取消

更新 现在，由于@CBroe的评论，请求被发送两次的问题得到了解决。但是，请求参数的键设置不正确。 下面是更新的JSFIDLE

---

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} )
    })

})

---

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

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

---

如果您不希望它具有提交功能，请在

按钮上使用
type=“button”
。
您必须添加
或返回false，如下所示：

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

或者指定
type=“button”
属性：

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

特别是对于jsiddle，如果您想在响应中获得
额外的
值，必须对其进行编码并将其分配给名为
json
的属性

这是一个有效的例子。
已解决

小提琴：

和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});
    })
})

谢谢你的评论，这是问题的一部分！现在剩下的问题是如何使用库发送具有多个密钥的文件。谢谢。如上所述，请求参数的键仍然没有正确设置。JSFIDLE代码实际上没有将文件本身附加到POST。（它是application/x-www-form-encoded，而不是mulitpart）对示例中缺少的内容有什么建议吗？
$(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});
    })
})