Загрузка нескольких файлов асинхронно с помощью 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} )
    })

})

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

ОТВЕТЫ

Ответ 1

решаемые.

Скрипка: 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});
    })
})

Ответ 2

Первый запрос POST, инициированный вашим script, отменяется, поскольку кнопка отправляет форму (вызывая второй запрос POST).

Используйте type="button" в button, если вы не хотите, чтобы у него были функции отправки.

Ответ 3

Вам нужно либо добавить 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.

Здесь рабочий пример.