El objeto de archivo

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

Los navegadores nos proporcionanFileobjeto.

El objeto Archivo es unGotaobjeto, y proporciona 3 propiedades además de él:

que se suma a laBlobpropiedades del objeto:

  • size(el tamaño en bytes)
  • type(el tipo MIME)

Recibirás unFileobjeto al interactuar con elFileListobjeto, que se puede recuperar de un formulario HTML con un<input type="file" />elemento, o al interactuar conArrastrar y soltar.

Cuando tienes unFileListobjeto, cuando lo recorre o selecciona un elemento (por ejemplo, el primer elemento conmyFileList[0]) obtendrás unFileobjeto.

Di que tienes uninput type="file"elemento en su formulario:

<input type="file" />

Ahora puedes escuchar elchangeevento en este elemento, por lo que cuando elijas un archivo obtendrás información sobre él.document.querySelector('input').filesdevolverá unFileListobjeto, como se explicó anteriormente, y usando[0]obtenemos el primer archivo cargado, y podemos acceder a todas las propiedades que necesitamos desde elFileobjeto:

document.querySelector('input').addEventListener('change', () => {
  const file = document.querySelector('input').files[0]
  alert(`The file ${file.name} was last modified on ${new Date(file.lastModified).toDateString()}`)
})

Ver la plumaDemostración de objeto de archivopor Flavio Copes (@flaviocopios) enCodePen.

Tech Wiki Online!