JavaScript Academy · Урок

Объект FormData

Создавайте составные данные из форм.

«Объект FormData» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое FormData

FormData — это интерфейс браузера для создания набора пар «ключ/значение», представляющих поля формы и их значения. Это стандартный способ упаковать данные, включая файлы, для отправки на сервер.

Данные кодируются в формате multipart/form-data, который поддерживает двоичные загрузки.

Создание пустого FormData

Создайте пустой FormData и добавляйте поля по одному с помощью append.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

Создание из элемента формы

Передайте конструктору элемент <form>, и каждый именованный элемент ввода будет захвачен автоматически. Это самый распространённый способ использования.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append и set

append добавляет значение, даже если ключ уже существует, поэтому один ключ может иметь несколько значений. set заменяет все существующие значения для этого ключа.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

Чтение значений

get возвращает первое значение для ключа, getAll возвращает все значения в виде массива, а has проверяет наличие ключа.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

Удаление полей

delete удаляет все значения для ключа. Это удобно, если нужно удалить поля перед отправкой.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

Перебор пар

FormData поддерживает перебор. Используйте entries, keys или values, либо цикл for...of, чтобы перебрать все пары.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Добавление файлов

append может принимать объект File или Blob в качестве значения. Необязательный третий аргумент задаёт имя файла, которое будет отправлено на сервер.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Зачем нужен составной формат данных

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

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

Преобразование в объект

Для простых форм, содержащих только текст, Object.fromEntries может преобразовать FormData в обычный объект. Учтите, что при этом для повторяющегося ключа сохранится только одно значение.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Зачем нужен FormData

FormData связывает формы HTML с сетевыми запросами. Он собирает поля и файлы, поддерживает повторяющиеся ключи и безопасно кодирует двоичные данные. Далее Вы прочитаете содержимое файлов с помощью FileReader, а затем отправите FormData сетевым запросом.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Быстрая проверка

В чём разница между append и set для объекта FormData?

Повторение: объект FormData

Вы научились упаковывать данные формы:

new FormData(form) автоматически захватывает именованные элементы ввода.
append допускает повторяющиеся ключи, а set заменяет их.
Читайте данные с помощью get, getAll и has; перебирайте их с помощью entries.
Данные кодируются в составной формат данных, поддерживающий файлы и двоичные данные.

Часто задаваемые вопросы

Урок «Объект FormData» бесплатный?

Да — полный текст урока «Объект FormData» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Объект FormData»?

Создавайте составные данные из форм. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Объект FormData»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy