Загрузка нескольких файлов асинхронно с помощью blueimp jquery-fileupload

Я использую библиотеку загрузки файлов jQuery (http://github.com/blueimp/jQuery-File-Upload), и я задумался, как использовать библиотеку, удовлетворяющую следующие условия.

• На странице есть несколько полей ввода файлов, окруженных тегом формы.
• Пользователи могут прикреплять несколько файлов к каждому полю ввода
• Все файлы отправляются на сервер при нажатии кнопки, а не при прикреплении файлов к полям ввода.
• Загрузка выполняется асинхронно
• Предположим, что на странице есть 3 поля ввода с их атрибутами имени: "file1 []", "file2 []" и "file3 []", полезная нагрузка запроса должна быть как {file1: [массив файлов в файле1 []] ], file2: [массив файлов в файле2 []],...}

Здесь jsFiddle, он ведет себя странно до сих пор в том, что он отправляет почтовый запрос дважды, а первый отменяется.

Обновления

Теперь, благодаря комментарию @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} )
    })

})

У кого-нибудь есть идея, как заставить это работать?

Ответы

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

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

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

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