El objeto FormData

Descubra qué es un objeto FormData y cómo usarlo

losFormDataEl objeto se utiliza para contener valores de formulario en una estructura de datos de pares clave-valor.

Tu creas un vacioFormDataobjeto de esta manera:

const fd = new FormData()

Una vez que tenga el elemento, puede llamar a uno de sus métodos:

  • append()para agregar un valor al objeto, con la clave especificada. Si la clave ya existe, se agrega el valor a esa clave, sin eliminar la primera
  • delete()elimina un par clave-valor
  • entries()da un objeto Iterator que puede recorrer para enumerar los pares clave-valor alojados
  • get()obtiene el valor asociado con una clave. Si se agregó más de un valor, devuelve el primero
  • getAll()obtener todos los valores asociados con una clave
  • has()devuelve verdadero si hay una clave
  • keys()da un objeto Iterator que puede recorrer para enumerar las claves alojadas
  • set()para agregar un valor al objeto, con la clave especificada. Si la clave ya existe, el valor se reemplaza
  • values()da un objeto Iterator que puede recorrer para enumerar los valores alojados

El objeto FormData es parte delXMLHttpRequest 2Especificaciones. Está disponible entodos los navegadores modernospero tenga en cuenta que las versiones de IE anteriores a la 10 no lo admiten.

Aquí hay un ejemplo de cómo usar FormData para enviar el contenido de un archivo usando una conexión XHR:

<input type="file" id="fileUpload" />
const sendFile = file => {
  const uri = '/saveImage'
  const xhr = new XMLHttpRequest()
  const fd = new FormData()

xhr.open(‘POST’, uri, true) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { const imageName = xhr.responseText //do what you want with the image name returned //e.g update the interface } } fd.append(‘myFile’, file) xhr.send(fd) }

const handleImageUpload = event => { const files = event.target.files sendFile(files[0]) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

En cambio, este fragmento se puede utilizar para enviar varios archivos:

<input type="file" id="fileUpload" multiple />
const sendFiles = files => {
  const uri = '/saveImage'
  const xhr = new XMLHttpRequest()
  const fd = new FormData()

xhr.open(‘POST’, uri, true) xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { const imageName = xhr.responseText //do what you want with the image name returned //e.g update the interface } }

for (let i = 0; i < files.length; i++) { fd.append(files[i].name, files[i]) }

xhr.send(fd) }

const handleImageUpload = event => { sendFiles(event.target.files) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })


Más tutoriales de navegador: