Объект FormData

Объект FormData предназначен для кодирования данных, которые необходимо отправить на сервер посредством технологии AJAX. Для кодирования данных, метод FormData использует формат multipart/form-data, можно подготовить для отправки по AJAX не только текстовые данные, но и файлы input с атрибутом type="file". Передачу на сервер данных, находящихся в объекте FormData, необходимо осуществлять посредством метода POST.

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

// создание объекта FormData
let formData = new FormData();

При создании объекта FormData ему можно в качестве параметра указать DOM-форму. В этом случае в объект FormData автоматически добавятся все поля поле:значение этой формы:

// создание объекта FormData и добавление в него всех полей формы
let formData = new FormData(document.forms.subscribe);

Методы объекта FormData

С помощью указанных ниже методов мы можем изменять поля в объекте FormData:

• formData.append(name, value) добавляет к объекту поле с именем name и значением value
• formData.append(name, blob, fileName) добавляет поле, как будто в форме имеется элемент <input type="file">, третий аргумент fileName устанавливает имя файла (не имя поля формы), как будто это имя из файловой системы пользователя
• formData.delete(name) удаляет поле с заданным именем name
• formData.get(name) получает значение поля с именем name
• formData.has(name) если существует поле с именем name, то возвращает true, иначе false

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

Ещё существует метод set, его синтаксис такой же, как у append. Разница в том, что .set удаляет все уже имеющиеся поля с именем name и только затем добавляет новое. То есть этот метод гарантирует, что будет существовать только одно поле с именем name, в остальном он аналогичен .append:

• formData.set(name, value)
• formData.set(name, blob, fileName)