La interfaz JavaScript FormData proporciona un método para crear un objeto que tiene pares clave-valor. Estos objetos se pueden compartir a través de Internet mediante el método fetch() o XMLHttpRequest.send(). Utiliza la funcionalidad del elemento de formulario HTML. Utilizará el mismo formato que utilizará un formulario del tipo de codificación configurado en 'multipart/form-data'.
También podemos pasarlo directamente al constructor URLSearchParams para obtener los parámetros de consulta tal como en el comportamiento de la etiqueta en el envío de la solicitud GET.
Generalmente, se utiliza para crear un conjunto de datos que enviarlo al servidor. El objeto FormData es una matriz de matrices que contiene una matriz para cada elemento.
Estas matrices tienen los siguientes tres valores:
nombre: Contiene el nombre del campo.
valor: Contiene el valor del campo, que puede ser un objeto String o Blob.
Nombre del archivo: Contiene el nombre del archivo, que es una cadena que contiene el nombre. El nombre se guardará en el servidor cuando un objeto blob se pase como 2Dakota del Norteparámetro.
¿Por qué FormData?
Los elementos del formulario HTML se desarrollan de manera que capturan automáticamente sus campos y valores. En tales escenarios, la interfaz FormData nos ayuda a enviar formularios HTML con o sin archivos y campos adicionales.
Es un objeto que contiene los datos del formulario ingresados por el usuario.
A continuación se muestra el constructor de datos del formulario:
let formData = new FormData([form]);
Los objetos FormData pueden ser aceptados como un cuerpo mediante métodos de red como fetch. Está codificado y enviado con el tipo de contenido: multipart/form-data de forma predeterminada.
El servidor lo considerará como un envío de formulario normal.
Entendamos un ejemplo simple de envío de FormData.
Envío de datos de formulario básicos
En el siguiente formulario, enviamos un FormData simple al servidor.
Índice.html:
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; En el ejemplo anterior, no configuramos ninguna API de backend para enviar los datos porque eso está más allá del alcance de este tutorial. Pero podemos verificar la carga útil en la pestaña de red y comprender cómo funciona la interfaz FormData.
Entonces, si observamos la solicitud de red en la herramienta de desarrollador, mostrará la siguiente carga útil:
En la solicitud de red anterior, los datos del formulario se envían a través de la red utilizando el objeto FormData. De otras formas, necesitamos especificar múltiples métodos para obtener los datos del formulario.
Por lo tanto, utilizando la interfaz FormData, podemos enviar fácilmente formData al servidor. Es sólo un código de una sola línea.
Constructor de datos de formulario
El constructor FormData() se utiliza para crear un nuevo objeto FormData. Se puede utilizar de las siguientes maneras:
new FormData() new FormData(form) new FormData(form, submitter)
Parámetros:
formulario (opcional):
Es un elemento HTML; si se especifica, el objeto FormData se completará con las claves/valores actuales del formulario. Utiliza las propiedades del atributo de nombre de cada elemento para las claves y su valor enviado para los valores. También codifica el contenido de entrada del archivo.
remitente (opcional):
El botón de envío es un elemento de un formulario. Si el elemento remitente tiene una propiedad de atributo de nombre, sus datos se incluirán en el objeto FormData.
strep
Métodos de datos de formulario
FormData proporciona varios métodos que pueden resultar útiles para acceder y modificar los datos de los campos del formulario.
En menos casos, es posible que necesitemos cambiar los datos del formulario antes de enviarlo al servidor. Estos métodos pueden resultar útiles para estos casos.
A continuación se muestran algunos métodos útiles de formData:
formData.append(nombre, valor)
Toma el nombre y el valor de dos argumentos y agrega un objeto de campo de formulario con el nombre y el valor proporcionados.
formData.append(nombre, blob, nombre de archivo)
Toma los argumentos nombre, blob y nombre de archivo. Agrega un campo para formar objetos de datos si el elemento HTML es, luego el tercer argumento fileName establece el nombre del archivo según el nombre del archivo en el sistema de archivos del usuario.
formData.delete(nombre)
Toma un nombre como argumento y elimina el campo especificado que tiene el mismo nombre.
formularioData.get(nombre)
También toma un nombre como argumento y obtiene el valor del campo especificado con el nombre de pila.
formData.tiene(nombre)
¿Qué es el altavoz?
También toma el nombre como argumento, verifica la existencia del campo con el nombre de pila y devuelve verdadero si existe; de lo contrario falso.
Un formulario puede tener varios campos con el mismo nombre, por lo que debemos especificar varios métodos de adición para agregar todos esos campos con el mismo nombre.
Pero los campos con el mismo nombre causarán errores y crearán complejidad al configurarlos en la base de datos. Entonces, formData proporciona otro método con la misma sintaxis que agregar, pero elimina todos los campos con el nombre dado y luego agrega un nuevo campo. Así, asegura que habrá una clave única con un nombre.
formData.set(name, value) formData.set(name, blob, fileName)
En el método set, la sintaxis funciona como el método append.
¿Cómo iterar FormData?
FormData proporciona un método FormData.entries() para recorrer todas sus claves. Este método devuelve un iterador que recorre en iteración todas las entradas clave/valor en FormData. Una clave es un objeto de cadena, mientras que el valor puede ser un blob o una cadena.
Considere el siguiente ejemplo:
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } El resultado del ejemplo anterior será:
key1, value1 key2, value2
Envío de un formulario con un fichero de datos
Los archivos también se pueden enviar utilizando FormData. Los archivos funcionan en el elemento del formulario y se envían como tipo de contenido: multipart/form-data. La codificación multiparte/formulario permite enviar archivos. Entonces, por defecto, es parte de los datos del formulario. Podemos enviar los archivos al servidor con la codificación de datos del formulario.
Considere el siguiente ejemplo:
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; En el ejemplo anterior, el objeto de imagen se envía en formato binario utilizando FormData. Lo podemos buscar en la pestaña de red de la herramienta de desarrollador:
Envío de datos de formulario como un objeto Blob
Enviar datos de formulario como un objeto blob es una forma sencilla de enviar datos binarios generados dinámicamente. Podría ser cualquier imagen o mancha; podemos enviarlo directamente al servidor pasándolo en el cuerpo de recuperación.
Es conveniente enviar datos de imágenes y otros datos de formularios, como nombre, contraseña, etc. Además, los servidores son más amigables para aceptar formularios codificados en varias partes en lugar de datos binarios.
Considere el siguiente ejemplo, que envía la imagen junto con los demás datos del formulario como un formulario.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } En el ejemplo anterior, podemos ver que la imagen blob se agrega de la siguiente manera:
formData.append('image', imageBlob, 'image.webp');
Que es lo mismo que un archivo, y el usuario envió un archivo con el nombre 'image.webp' con algunos datos imageBlob del sistema de archivos. El servidor los leerá como datos de formato normal.