Как добавить несколько файловых входов в объект FormData, используя $.each?

У меня есть несколько (и динамических) входов type=file.

Я хочу создать из них объект FormData.

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

myFormData.append(name,file,filename);

HTML

<form id="my_form" enctype="multipart/form-data">
    <input type="file" name="undefined" id="file_1" data-filename="image.jpg">
    <input type="file" name="undefined" id="file_2" data-filename="image2.jpg">
    <button>click</button>
</form>

JQuery

var myFormData = new FormData();

$(document).on("click", "button", function(e) {
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs,function(obj,v) {
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    });

    //alert(JSON.stringify(myFormData));
    console.log(myFormData);
});

Я не думаю, что объект создается правильно, и я не смог правильно просмотреть содержимое объекта, чтобы подтвердить это.

Вот что я получаю в консоли:

введите здесь описание изображения

jsFiddle

http://jsfiddle.net/rwone/K7aMw/


javascript jquery form-data each
person user1063287    schedule 20.02.2014    source источник

Ответы (1)


arrow_upward
22
arrow_downward

Нет хорошего способа увидеть содержимое FormData. Хитрость заключалась бы в том, чтобы отправить его (POST) и посмотреть на статус сети.

Пример: http://jsfiddle.net/K7aMw/2/

$(document).on("click", "button", function (e) {
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs, function (obj, v) {
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    });
    var xhr = new XMLHttpRequest;
    xhr.open('POST', '/echo/html/', true);
    xhr.send(myFormData);
});

Затем на вкладке «Сеть» (F12) вы увидите добавленные файлы при проверке заголовков.

person Spokey    schedule 20.02.2014
comment
Как я могу получить значение name, то есть файл_1 и файл_2 в nodejs, используя данные формы для каждой итерации файла? - person sumitjainjr; 28.11.2017
comment
Я использую это, чтобы увидеть содержимое formdata для (var пары formData.entries()) { console.log(pair[0] + ', ' +pair[1]); } - person Project Mayhem; 10.05.2019
comment
Используйте класс вместо идентификатора, если у вас есть несколько элементов с одинаковым именем. - person pizzamonster; 25.10.2019