Uploading multiple files asynchronously by blueimp jquery-fileupload

我怕爱的太早我们不能终老 提交于 2019-11-27 09:26:24

Solved.

Fiddle: http://jsfiddle.net/BAQtG/29/

And js code

$(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});
    })
})

The first POST request triggered by your script gets canceled, because the button submits the form (causing the second POST request).

Use type="button" on the button if you don’t want it to have submit functionality.

You have to either add a return false;, as shown below:

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

or specify the type="button" attribute:

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

In order to set the formData, use the following:

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

Specifically for JSFiddle, if you want to get the extra value in the response, you have to encode it and assign it to a property named json.

Here's a working example.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!