Guías Técnicas

Usando FormData en JavaScript

¿Qué es FormData?

FormData es una interfaz en JavaScript que permite construir fácilmente conjuntos de datos clave-valor que se pueden enviar a través de solicitudes HTTP. Es una herramienta esencial cuando se trabaja con formularios HTML, ya que facilita el envío de datos dinámicos, incluidos archivos y otros tipos de contenido complejo.

  Ventajas

  • Compatible con datos complejos como archivos.
  • Permite agregar o modificar datos dinámicamente.
  • Facilita el envío de formularios con fetch o XMLHttpRequest.

¿Por qué usar FormData?

  • Manejo de archivos: Permite incluir archivos en las solicitudes sin necesidad de configuraciones adicionales.
  • Flexibilidad: Puedes agregar, modificar o eliminar datos antes de enviarlos.
  • Compatibilidad: Funciona perfectamente con métodos HTTP como POST o PUT.

Enviando un Formulario Simple

Ejemplo Básico

Este ejemplo muestra cómo enviar un formulario básico utilizando FormData y fetch:

html 
<form id="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email">

<button type="submit">Enviar</button>
</form>

<script>
document.getElementById('miFormulario').addEventListener('submit', function (event) {
  event.preventDefault(); // Previene el envío tradicional

  const formData = new FormData(this); // Crea un objeto FormData con los datos del formulario

  fetch('/procesar', {
    method: 'POST',
    body: formData
  })
    .then(response => response.text())
    .then(data => {
      console.log('Respuesta del servidor:', data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
});
</script>

Métodos de FormData

  1. Método append(name, value): Agrega un nuevo campo al objeto FormData.

    javascript 
    formData.append('apellido', 'García');

  2. Método delete(name): Elimina un campo específico.

    javascript 
    formData.delete('apellido');

  3. Método get(name): Obtiene el valor de un campo por su nombre.

    javascript 
    console.log(formData.get('nombre'));

  4. Método has(name): Verifica si existe un campo.

    javascript 
    console.log(formData.has('email')); // true o false

  5. Método set(name, value): Establece o reemplaza un valor.

    javascript 
    formData.set('nombre', 'Juan');

Enviando un Formulario con un Archivo

Puedes enviar archivos fácilmente con FormData:

html 
<form id="formArchivo">
<label for="archivo">Selecciona un archivo:</label>
<input type="file" id="archivo" name="archivo">

<button type="submit">Subir</button>
</form>

<script>
document.getElementById('formArchivo').addEventListener('submit', function (event) {
  event.preventDefault();

  const formData = new FormData(this);

  fetch('/subir', {
    method: 'POST',
    body: formData
  })
    .then(response => response.json())
    .then(data => {
      console.log('Archivo subido:', data);
    })
    .catch(error => {
      console.error('Error al subir el archivo:', error);
    });
});
</script>

Enviando un Formulario con Datos Blob

Un Blob (Binary Large Object) es un objeto que contiene datos binarios. Puedes usarlo para enviar datos como imágenes generadas dinámicamente. Ejemplo con Blob

html 
<button id="enviarBlob">Enviar Blob</button>

<script>
document.getElementById('enviarBlob').addEventListener('click', function () {
  const blob = new Blob(['Contenido dinámico del archivo'], { type: 'text/plain' });

  const formData = new FormData();
  formData.append('archivo', blob, 'archivo.txt');

  fetch('/subir', {
    method: 'POST',
    body: formData
  })
    .then(response => response.text())
    .then(data => {
      console.log('Respuesta del servidor:', data);
    })
    .catch(error => {
      console.error('Error al enviar el Blob:', error);
    });
});
</script>
  Resumen

  1. FormData es una herramienta poderosa para manejar formularios dinámicamente.
  2. Con métodos como append, delete, get y set, puedes gestionar los datos de manera flexible.
  3. Facilita el manejo de archivos y datos Blob para aplicaciones avanzadas.