FormData.append()

Метод append() из интерфейса FormData добавляет новое значение в существующий ключ внутри объекта FormData, или создаёт ключ, в случае если он отсутствует.

Разница между FormData.set и append() в том, что если заданный ключ уже существует, FormData.set заменит данные в нем на новые, а append() добавит новое значение к остальным в конец.

Примечание: Данный метод также доступен в Web Workers.

Синтаксис

Существует две формы использования данной функции: с двумя и тремя параметрами:

js

formData.append(name, value);
formData.append(name, value, filename);

Параметры

name

Имя поля, которое будет содержать данные из value.

value

Значение поля. В варианте с двумя параметрами, это является USVString, если значение не является строкой, то оно будет в неё конвертировано. В варианте с тремя параметрами это может быть Blob, File, или USVString, И снова, если ни один из них не указан в значении то оно будет конвертировано в строку.

filename Необязательный

Имя файла которое будет отправлено серверу (USVString), когда Blob или File прошёл проверку как второй параметр. Стандартное имя файла для Blob объектов это "blob".

Примечание: Если вы укажете Blob в качестве данных для включения в объект FormData, имя файла будет указано для сервера в заголовке "Content-Disposition" и может отличаться от браузера к браузеру.

Возвращает

Пустота.

Пример

Данная строка кода создаёт пустой FormData объект:

js

var formData = new FormData(); // Currently empty

Вы можете добавлять пару ключ/значение с помощью FormData.append:

js

formData.append("username", "Chris");
formData.append("userpic", myFileInput.files[0], "chris.jpg");

Также вы можете использовать обозначения массива для первого аргумента:

js

formData.append("userpic[]", myFileInput1.files[0], "chris1.jpg");
formData.append("userpic[]", myFileInput2.files[0], "chris2.jpg");

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

Спецификации

Specification
XMLHttpRequest Standard
# dom-formdata-append

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также