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

IT技术 javascript jquery file-upload jquery-file-upload form-data
2021-03-10 08:03:51

我正在使用 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} )
    })

})

有人知道如何让这个工作吗？

3个回答

解决了。

小提琴：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});
    })
})
jsfiddle 代码实际上并未将文件本身附加到 POST。（它是 application/x-www-form-encoded，而不是 mulitpart）关于示例中缺少什么的任何建议？
2021-04-29 08:03:51

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

使用type="button"的button，如果你不希望它有提交的功能。

感谢您的评论，这是问题的一部分！现在剩下的问题是如何使用库发送具有多个键的文件。
2021-04-24 08:03:51

您必须添加一个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.

这是一个工作示例。

这次真是万分感谢。如上所述，请求参数的键仍然没有正确设置。
2021-05-07 08:03:51
其它你可能感兴趣的问题
上一篇HTML5 视频，如何检测没有音轨的情况？ 下一篇如何计算 JavaScript 中 2 个时区的差异？