Post javascript отправка файла

Using FormData Objects

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest . It is primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form’s submit() method would use to send the data if the form’s encoding type were set to multipart/form-data .

Creating a FormData object from scratch

You can build a FormData object yourself, instantiating it then appending fields to it by calling its append() method, like this:

const formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // HTML file input, chosen by user formData.append("userfile", fileInputElement.files[0]); // JavaScript file-like object const content = 'hey!'; // the body of the new file… const blob = new Blob([content],  type: "text/xml" >); formData.append("webmasterfile", blob); const request = new XMLHttpRequest(); request.open("POST", "http://foo.com/submitform.php"); request.send(formData); 

Note: The fields «userfile» and «webmasterfile» both contain a file. The number assigned to the field «accountnum» is immediately converted into a string by the FormData.append() method (the field’s value can be a Blob , File , or a string: if the value is neither a Blob nor a File, the value is converted to a string).

This example builds a FormData instance containing values for fields named «username», «accountnum», «userfile» and «webmasterfile», then uses the XMLHttpRequest method send() to send the form’s data. The field «webmasterfile» is a Blob . A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn’t necessarily in a JavaScript-native format. The File interface is based on Blob , inheriting blob functionality and expanding it to support files on the user’s system. In order to build a Blob you can invoke the Blob() constructor .

Retrieving a FormData object from an HTML form

To construct a FormData object that contains the data from an existing , specify that form element when creating the FormData object:

Note: FormData will only use input fields that use the name attribute.

const formData = new FormData(someFormElement); 

const formElement = document.querySelector("form"); const request = new XMLHttpRequest(); request.open("POST", "submitform.php"); request.send(new FormData(formElement)); 

You can also append additional data to the FormData object between retrieving it from a form and sending it, like this:

const formElement = document.querySelector("form"); const formData = new FormData(formElement); const request = new XMLHttpRequest(); request.open("POST", "submitform.php"); formData.append("serialnumber", serialNumber++); request.send(formData); 

This lets you augment the form’s data before sending it along, to include additional information that’s not necessarily user-editable.

Sending files using a FormData object

You can also send files using FormData . Include an element of type file in your :

form enctype="multipart/form-data" method="post" name="fileinfo"> p> label >Your email address: input type="email" autocomplete="on" name="userid" placeholder="email" required size="32" maxlength="64" /> label> p> p> label >Custom file label: input type="text" name="filelabel" size="12" maxlength="32" /> label> p> p> label >File to stash: input type="file" name="file" required /> label> p> p> input type="submit" value="Stash the file!" /> p> form> div id="output">div> 

Then you can send it using code like the following:

const form = document.forms.namedItem("fileinfo"); form.addEventListener( "submit", (event) =>  const output = document.querySelector("#output"); const formData = new FormData(form); formData.append("CustomField", "This is some extra data"); const request = new XMLHttpRequest(); request.open("POST", "stash.php", true); request.onload = (progress) =>  output.innerHTML = request.status === 200 ? "Uploaded!" : `Error $request.status> occurred when trying to upload your file.
`; >; request.send(formData); event.preventDefault(); >, false, ); 

Note: If you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call.

Warning: When using FormData to submit POST requests using XMLHttpRequest or the Fetch_API with the multipart/form-data Content-Type (e.g. when uploading Files and Blobs to the server), do not explicitly set the Content-Type header on the request. Doing so will prevent the browser from being able to set the Content-Type header with the boundary expression it will use to delimit form fields in the request body.

You can also append a File or Blob directly to the FormData object, like this:

.append("myfile", myBlob, "filename.txt"); 

When using the append() method it is possible to use the third optional parameter to pass a filename inside the Content-Disposition header that is sent to the server. When no filename is specified (or the parameter isn’t supported), the name «blob» is used.

Using a formdata event

A more recent addition to the platform than the FormData object is the formdata event — this is fired on an HTMLFormElement object after the entry list representing the form’s data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData() constructor.

This allows a FormData object to be quickly obtained in response to a formdata event firing, rather than needing to put it together yourself.

Typically this is used as shown in our simple formdata event demo — in the JavaScript we reference a form:

const formElem = document.querySelector("form"); 

In our submit event handler we use preventDefault to stop the default form submission, then invoke a FormData constructor to trigger the formdata event:

.addEventListener("submit", (e) =>  // on form submission, prevent default e.preventDefault(); // construct a FormData object, which fires the formdata event new FormData(formElem); >); 

When the formdata event fires we can access the FormData object using FormDataEvent.formData , then do what we like with it (below we post it to the server using XMLHttpRequest ).

.addEventListener("formdata", (e) =>  console.log("formdata fired"); // Get the form data from the event object const data = e.formData; for (const value of data.values())  console.log(value); > // submit the data via XHR const request = new XMLHttpRequest(); request.open("POST", "/formHandler"); request.send(data); >); 

Note: The formdata event and FormDataEvent object are available in Chrome from version 77 (and other equivalent Chromiums), and Firefox 72 (first available behind the dom.formdata.event.enabled pref in Firefox 71).

Submitting forms and uploading files via AJAX without FormData objects

If you want to know how to serialize and submit a form via AJAX without using FormData objects, please read this paragraph.

Gotchas

The FormData object doesn’t include data from the fields that are disabled or the fieldsets that are disabled.

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

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. Чтобы послать файл, нужно использовать синтаксис с тремя аргументами, в качестве третьего как раз указывается имя файла, которое обычно, при , берётся из файловой системы.

Источник