blueimp jquery-fileupload 异步上传多个文件 [英] Uploading multiple files asynchronously by blueimp jquery-fileupload

问题描述

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

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.

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

这是 jsFiddle，到目前为止它的行为很奇怪，因为它发送了两次 post 请求，而第一个被取消了.

Here's jsFiddle, it's behaving weird so far in that it sends post request twice and the first one is cancelled.

现在感谢@CBroe 的评论，请求被发送两次的问题得到解决.但是请求参数的键没有正确设置.这是更新的 jsFiddle.

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.

http://jsfiddle.net/BAQtG/27/

js 代码的核心部分是这样的.

The core part of js code looks like this.

$(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?

推荐答案

已解决.

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

这篇关于blueimp jquery-fileupload 异步上传多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！