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

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

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

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

обновления

Теперь благодаря @Cbroe's комментарий, проблема, что запрос отправляется дважды, исправлена. Однако параметр keys of request установлен неправильно. Вот обновленный 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} )
    })

})

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

13
file-upload form-data javascript jquery jquery-file-upload

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

первый запрос POST, инициированный вашим скриптом, отменяется, потому что кнопка передает форма (вызывающая второй запрос POST).

использовать type="button" на button Если вы не хочу представить функциональность.

1

вы должны добавить return false;, как показано ниже:

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

или указать :

<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.

здесь ' s рабочий пример.

0