Загрузка более одного файла с использованием AJAX и formData (отдельно, а не несколько файлов вместе)

У меня есть форма, в которой три загрузки файлов должны происходить через три отдельных ввода файлов. Используя AJAX и formData, я могу загрузить первый файл, но все последующие файлы не загружаются.

Я предполагаю, что проблема связана с этой строкой кода:

var formData = new FormData($("form")[0]);

и я предполагаю, что мне нужно каким-то образом повторить, чтобы определить количество файлов для загрузки, однако я не уверен в логике, чтобы это произошло. Мой код пока выглядит следующим образом:

$("#uploadA, #uploadB, #uploadC").click(function(){
    var formData = new FormData($("form")[0]);
    var progress = $(this).prop("id");

    $.ajax({
        url: url,
        type: "POST",
        xhr: function() {  
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener("progress",function(e) {
                    if(e.lengthComputable){
                        $("#"+progress).attr({value:e.loaded,max:e.total});
                    }
                }, false); 
            }
            return myXhr;
        },

        success: success,
        error: error,
        data: formData,
        contentType: false,
        processData: false
    });

});

Для завершения пример HTML-кода выглядит следующим образом (со всеми тремя загрузочными «виджетами» по одному и тому же шаблону):

<div class="form-box">
    <label for="A">Episode (MP3)</label>
    <progress max="100" value="0" id="progressA"></progress>
    <input type="file" name="a" value="a" id="a">
    <input type="button" value="Upload" id="uploadA" name="uploadA">
</div>

multipartform-data jquery ajax file-upload form-data
person Ryan    schedule 12.11.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй это:

    var formData = new FormData($(this).closest("form")[0]);

Это позволит получить formData для формы, содержащей кнопку загрузки, на которую вы нажали, а не для первой формы в документе. Это предполагает, что у вас есть отдельная форма для каждого файла.

Если все они имеют одинаковую форму, но вы не хотите отправлять всю форму, вам придется создать объект formData вручную, как описано в Создание объекта FormData с нуля

var formData = new FormData();
var fileElement = $(this).prev()[0];
formData.append(fileElement.name, fileElement);
person Barmar    schedule 12.11.2013
comment
К сожалению, похоже, это не работает. Неважно, на какую загрузку я нажимаю, загружается только первая. Но это может быть любой из трех, которые я выберу первым. То один работает, то два других не работают. - person Ryan; 12.11.2013
comment
Они в разных формах? Это то, что предполагает мой ответ. - person Barmar; 12.11.2013
comment
Нет, извините, они все части одной и той же формы. Я должен был указать это - извинения. - person Ryan; 12.11.2013