En esta publicación, aprenderemos sobre la interfaz FormData disponible en los navegadores web modernos como parte de la especificación HTML5.
Veremos ejemplos del uso de FormData con Ajax, Angular 7, Ionic y React.
¿Qué es FormData?
FormData es simplemente una estructura de datos que se puede utilizar para almacenar pares clave-valor. Como sugiere su nombre, está diseñado para contener datos de formularios, es decir, puede usarlo con JavaScript para crear un objeto que corresponda a un formulario HTML. Es sobre todo útil cuando necesita enviar datos de formulario a puntos finales de la API RESTful, por ejemplo, para cargar uno o varios archivos utilizando la XMLHttpRequest
interfaz, la fetch()
API o Axios.
Puede crear un objeto FormData creando una instancia de la interfaz FormData utilizando el new
operador de la siguiente manera:
const formData = new FormData()
La formData
referencia se refiere a una instancia de FormData. Puede llamar a muchos métodos en el objeto para agregar y trabajar con pares de datos. Cada par tiene una clave y un valor.
Estos son los métodos disponibles en los objetos FormData:
append()
: se utiliza para agregar un par clave-valor al objeto. Si la clave ya existe, el valor se agrega al valor original de esa clave,delete()
: se usa para eliminar un par clave-valor,entries()
: devuelve un objeto Iterator que puede utilizar para recorrer la lista de pares clave-valor en el objeto,get()
: utilizado para devolver el valor de una clave. Si se agregan varios valores, devuelve el primer valor,getAll()
: utilizado para devolver todos los valores de una clave especificada,has()
: utilizado para comprobar si hay una llave,keys()
: devuelve un objeto Iterador que puede utilizar para enumerar las claves disponibles en el objeto,set()
: se usa para agregar un valor al objeto, con la clave especificada. Esto va a relacionar el valor si ya existe una clave,values()
: devuelve un objeto Iterator para los valores del objeto FormData.
Ejemplo de carga de archivos con Vanilla JavaScript
Veamos ahora un ejemplo simple de carga de archivos usando JavaScript vanilla XMLHttpRequest
y FormData
.
Navegue a su carpeta de trabajo y cree un index.html
archivo con el siguiente contenido:
Parcel Sandbox
Simplemente creamos un documento HTML con un identificado por el
app
ID. A continuación, incluimos el index.js
archivo mediante una etiqueta.
A continuación, cree el index.js
archivo y agregue el siguiente código:
document.getElementById("app").innerHTML = ` File Upload & FormData Example
`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });
Primero insertamos un elemento en nuestra página HTML. Esto se utilizará para seleccionar el archivo que cargaremos.
A continuación, consultamos el elemento de entrada del archivo utilizando el querySelector()
método.
A continuación, definimos el uploadFile()
método en el que primero declaramos una API_ENDPOINT
variable que contiene la dirección de nuestro punto final de carga de archivos. A continuación, creamos una XMLHttpRequest
solicitud y un FormData
objeto vacío .
Usamos el método append de FormData para agregar el archivo, pasado como parámetro al uploadFile()
método, a la file
clave. Esto creará un par clave-valor con file
como clave y el contenido del archivo pasado como valor.
A continuación, enviamos la solicitud utilizando el send()
método de XMLHttpRequest
y pasamos el FormData
objeto como argumento.
Después de definir el uploadFile()
método, escuchamos el evento de cambio en el elemento y llamamos al
uploadFile()
método con el archivo seleccionado como argumento. Se accede al archivo desde la event.target.files
matriz.
Puede experimentar con este ejemplo de este código sandbox:
Carga de varios archivos
Puede modificar fácilmente el código anterior para admitir la carga de varios archivos.
Primero, debe agregar la multiple
propiedad al elemento:
Ahora, podrá seleccionar varios archivos de su unidad.
A continuación, cambie el uploadFile()
método para aceptar una matriz de archivos como argumento y simplemente recorra la matriz y agregue los archivos al FormData
objeto:
const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); };
Finalmente, llame al método con una matriz de archivos como argumento:
fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); });
A continuación, puede consultar estos tutoriales avanzados sobre cómo usar FormData
con Angular, Ionic y React:
- Cómo publicar FormData con Angular 7
- React y Axios FormData
- Carga de varios archivos con Ionic 4 y FormData