Breaking

Post Top Ad

Your Ad Spot

martes, 14 de enero de 2020

El objeto FormData

El FormDataobjeto se utiliza para mantener valores de formulario en una estructura de datos de pares clave-valor.
Crea un FormDataobjeto vacío de esta manera:
const fd = new FormData()
Una vez que tenga el artículo, puede llamar a uno de sus métodos:
  • append()para agregar un valor al objeto, con la clave especificada. Si la clave ya existe, el valor se agrega a esa clave, sin eliminar la primera.
  • delete() elimina un par de valores clave
  • entries() le da un objeto Iterator que puede recorrer para enumerar los pares de valores clave alojados
  • get()obtener 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() le 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() le da un objeto Iterator que puede recorrer para enumerar los valores alojados
El objeto FormData es parte de la especificación XMLHttpRequest 2 . Está disponible en todos los navegadores modernos, pero tenga en cuenta que las versiones de IE anteriores a la 10 no son compatibles.
Aquí hay un ejemplo del uso de 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)
})
Este fragmento en su lugar se puede usar para enviar múltiples 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)
})

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas