Что такое FormData?

Объект FormData в JavaScript представляет собой мощный и удобный инструмент для создания и манипуляций с наборами пар ключ-значение, которые затем могут быть легко отправлены на сервер с использованием асинхронных запросов, таких как fetch или XMLHttpRequest. Основной способ создания объекта FormData — передача в конструктор существующей HTML-формы: const formData = new FormData(formElement). При этом объект автоматически считывает все поля ввода, имеющие атрибут name, включая текстовые поля, выпадающие списки и даже файлы, выбранные пользователем через input типа file.

Помимо автоматического сбора данных из существующей формы, вы можете работать с FormData программно, используя встроенные методы. Метод append(name, value) позволяет добавлять новые данные или дополнительные значения к существующим ключам. Если нужно получить конкретное значение по ключу, используется метод get(name), а для удаления данных служит метод delete(name). Также объект поддерживает метод set(name, value), который перезаписывает все существующие значения с указанным именем на новое.

Для обхода всех данных, содержащихся в объекте FormData, предусмотрены специальные методы итерации, такие как entries(). С его помощью можно легко пройтись по всем парам ключ-значение с помощью цикла for...of, что особенно полезно для отладки или предварительной валидации данных перед отправкой.

Главным преимуществом FormData является встроенная поддержка мультимедийных данных. Вы можете добавлять файлы напрямую из input.files, и браузер автоматически сформирует запрос в формате multipart/form-data, который корректно обрабатывается бэкендом на любых языках программирования. Отправка таких данных с помощью fetch выглядит крайне лаконично: достаточно передать объект FormData в качестве значения свойства body в конфигурационном объекте запроса, не заботясь о ручной установке заголовков Content-Type, так как браузер установит их самостоятельно вместе с необходимым уникальным разделителем.