Uploading multiple files asynchronously by blueimp jquery-fileupload

Question

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 condi

Answer 1

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.

Answer 2

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.

Answer 3

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