JavaScript Academy · Lección

El objeto FormData

Cree cargas multipart a partir de formularios.

El objeto FormData es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es FormData?

FormData es una API del navegador para crear un conjunto de pares clave/valor que representan los campos de un formulario y sus valores. Es la forma estándar de empaquetar datos, incluidos archivos, para enviarlos a un servidor.

Se codifica como multipart/form-data, que admite cargas binarias.

Creación de un FormData vacío

Construya un FormData vacío y añada los campos uno a uno con append.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

Creación a partir de un elemento de formulario

Pase un elemento <form> al constructor y todos los campos con nombre se capturarán automáticamente. Este es el uso más habitual.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append frente a set

append añade un valor aunque la clave ya exista, lo que permite varios valores por clave. set reemplaza todos los valores existentes de esa clave.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

Lectura de valores

get devuelve el primer valor de una clave, getAll devuelve todos los valores como un array y has comprueba si existe.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

Eliminación de campos

delete elimina todos los valores de una clave. Resulta útil para quitar campos antes de enviar los datos.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

Iteración sobre las entradas

FormData es iterable. Use entries, keys o values, o un bucle for...of, para recorrer todos los pares.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Añadir archivos

append puede recibir un File o un Blob como valor. Un tercer argumento opcional establece el nombre de archivo que se enviará al servidor.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Por qué usar multipart/form-data

FormData se serializa como multipart/form-data, que puede transportar tanto campos de texto como el contenido binario de archivos en el cuerpo de una sola solicitud. Por eso es el formato habitual para cargar archivos.

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

Conversión a un objeto

En formularios sencillos que solo contienen texto, Object.fromEntries puede convertir FormData en un objeto plano. Tenga en cuenta que conserva un solo valor por cada clave repetida.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Por qué es importante FormData

FormData conecta los formularios HTML con las solicitudes de red. Recopila campos y archivos, admite claves repetidas y codifica los datos binarios de forma segura. A continuación, leerá el contenido de los archivos con FileReader y después enviará FormData con fetch.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Comprobación rápida

¿Cuál es la diferencia entre append y set en un FormData?

Repaso: el objeto FormData

Ha aprendido a empaquetar datos de formularios:

new FormData(form) captura automáticamente los campos con nombre.
append permite claves repetidas; set las reemplaza.
Lea los datos con get, getAll y has; itere con entries.
Se codifica como multipart/form-data, que admite archivos y datos binarios.

Preguntas frecuentes

¿La lección «El objeto FormData» es gratis?

Sí — el texto completo de «El objeto FormData» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El objeto FormData»?

Cree cargas multipart a partir de formularios. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «El objeto FormData»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy