Form data and javascript

FormData

This chapter is about sending HTML forms: with or without files, with additional fields and so on.

FormData objects can help with that. As you might have guessed, it’s the object to represent HTML form data.

let formData = new FormData([form]);

If HTML form element is provided, it automatically captures its fields.

The special thing about FormData is that network methods, such as fetch , can accept a FormData object as a body. It’s encoded and sent out with Content-Type: multipart/form-data .

From the server point of view, that looks like a usual form submission.

Sending a simple form

Let’s send a simple form first.

As you can see, that’s almost one-liner:

In this example, the server code is not presented, as it’s beyond our scope. The server accepts the POST request and replies “User saved”.

FormData Methods

We can modify fields in FormData with methods:

• formData.append(name, value) – add a form field with the given name and value ,
• formData.append(name, blob, fileName) – add a field as if it were , the third argument fileName sets file name (not form field name), as it were a name of the file in user’s filesystem,
• formData.delete(name) – remove the field with the given name ,
• formData.get(name) – get the value of the field with the given name ,
• formData.has(name) – if there exists a field with the given name , returns true , otherwise false

A form is technically allowed to have many fields with the same name , so multiple calls to append add more same-named fields.

There’s also method set , with the same syntax as append . The difference is that .set removes all fields with the given name , and then appends a new field. So it makes sure there’s only one field with such name , the rest is just like append :

Also we can iterate over formData fields using for..of loop:

let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); // List key/value pairs for(let [name, value] of formData) < alert(`$= $`); // key1 = value1, then key2 = value2 >

Sending a form with a file

The form is always sent as Content-Type: multipart/form-data , this encoding allows to send files. So, fields are sent also, similar to a usual form submission.

Here’s an example with such form:

 Picture:   

Sending a form with Blob data

As we’ve seen in the chapter Fetch, it’s easy to send dynamically generated binary data e.g. an image, as Blob . We can supply it directly as fetch parameter body .

In practice though, it’s often convenient to send an image not separately, but as a part of the form, with additional fields, such as “name” and other metadata.

Also, servers are usually more suited to accept multipart-encoded forms, rather than raw binary data.

This example submits an image from , along with some other fields, as a form, using FormData :

Please note how the image Blob is added:

formData.append("image", imageBlob, "image.png");

That’s same as if there were in the form, and the visitor submitted a file named «image.png» (3rd argument) with the data imageBlob (2nd argument) from their filesystem.

The server reads form data and the file, as if it were a regular form submission.

Summary

FormData objects are used to capture HTML form and submit it using fetch or another network method.

We can either create new FormData(form) from an HTML form, or create an object without a form at all, and then append fields with methods:

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

Let’s note two peculiarities here:

1. The set method removes fields with the same name, append doesn’t. That’s the only difference between them.
2. To send a file, 3-argument syntax is needed, the last argument is a file name, that normally is taken from user filesystem for .

Источник

FormData

The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch() , XMLHttpRequest.send() or navigator.sendBeacon() methods. It uses the same format a form would use if the encoding type were set to «multipart/form-data» .

You can also pass it directly to the URLSearchParams constructor if you want to generate query parameters in the way a would do if it were using simple GET submission.

An object implementing FormData can directly be used in a for. of structure, instead of entries() : for (const p of myFormData) is equivalent to for (const p of myFormData.entries()) .

Note: This feature is available in Web Workers.

Constructor

Creates a new FormData object.

Instance methods

Appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

Deletes a key/value pair from a FormData object.

Returns an iterator that iterates through all key/value pairs contained in the FormData .

Returns the first value associated with a given key from within a FormData object.

Returns an array of all the values associated with a given key from within a FormData .

Returns whether a FormData object contains a certain key.

Returns an iterator iterates through all keys of the key/value pairs contained in the FormData .

Sets a new value for an existing key inside a FormData object, or adds the key/value if it does not already exist.

Returns an iterator that iterates through all values contained in the FormData .

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on May 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

FormData

В этой главе речь пойдёт об отправке HTML-форм: с файлами и без, с дополнительными полями и так далее. Объекты FormData помогут нам с этим. Как вы, наверняка, догадались по его названию, это объект, представляющий данные HTML формы.

let formData = new FormData([form]);

Если передать в конструктор элемент HTML-формы form , то создаваемый объект автоматически прочитает из неё поля.

Его особенность заключается в том, что методы для работы с сетью, например fetch , позволяют указать объект FormData в свойстве тела запроса body .

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: multipart/form-data .

То есть, для сервера это выглядит как обычная отправка формы.

Отправка простой формы

Давайте сначала отправим простую форму.

Как вы видите, код очень компактный:

В этом примере серверный код не представлен, он за рамками этой статьи, он принимает POST-запрос с данными формы и отвечает сообщением «Пользователь сохранён».

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

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

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

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

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

Поля объекта formData можно перебирать, используя цикл for..of :

let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Список пар ключ/значение for(let [name, value] of formData) < alert(`$= $`); // key1=value1, потом key2=value2 >

Отправка формы с файлом

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

 Картинка:   

Отправка формы с Blob-данными

Ранее в главе Fetch мы видели, что очень легко отправить динамически сгенерированные бинарные данные в формате Blob . Мы можем явно передать её в параметр body запроса fetch .

Но на практике бывает удобнее отправлять изображение не отдельно, а в составе формы, добавив дополнительные поля для имени и другие метаданные.

Кроме того, серверы часто настроены на приём именно форм, а не просто бинарных данных.

В примере ниже посылается изображение из и ещё несколько полей, как форма, используя FormData :

Пожалуйста, обратите внимание на то, как добавляется изображение Blob :

formData.append("image", imageBlob, "image.png");

Это как если бы в форме был элемент и пользователь прикрепил бы файл с именем «image.png» (3-й аргумент) и данными imageBlob (2-й аргумент) из своей файловой системы.

Сервер прочитает и данные и файл, точно так же, как если бы это была обычная отправка формы.

Итого

Объекты FormData используются, чтобы взять данные из HTML-формы и отправить их с помощью fetch или другого метода для работы с сетью.

Мы можем создать такой объект уже с данными, передав в конструктор HTML-форму – new FormData(form) , или же можно создать объект вообще без формы и затем добавить к нему поля с помощью методов:

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

1. Метод set удаляет предыдущие поля с таким же именем, а append – нет. В этом их единственное отличие.
2. Чтобы послать файл, нужно использовать синтаксис с тремя аргументами, в качестве третьего как раз указывается имя файла, которое обычно, при , берётся из файловой системы.

Источник