El objeto de archivo

Descubra qué es un objeto Archivo y cómo utilizarlo

Los navegadores nos proporcionan un Fileobjeto.

El objeto Archivo es un objeto Blob y proporciona 3 propiedades sobre él:

• name(una cadena)
• lastModified(la marca de tiempo UNIX de la última fecha y hora de modificación)

que se suma a las Blobpropiedades del objeto:

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

Recibirás un Fileobjeto al interactuar con el FileListobjeto, que se puede recuperar de un formulario HTML con un input type="file" /elemento, o al interactuar con Arrastrar y soltar .

Cuando obtienes un FileListobjeto, cuando corres el bucle o seleccionas un elemento (por ejemplo, el primer elemento con myFileList[0]), obtendrás un Fileobjeto.

Digamos que tienes un input type="file"elemento en tu formulario:

input type="file" /

Ahora puedes escuchar el changeevento en este elemento, por lo que cuando elijas un archivo obtendrás información sobre él. document.querySelector('input').filesDevolverá un FileListobjeto, como se explicó anteriormente, y al usar [0]obtenemos el primer archivo cargado y podemos acceder a todas las propiedades que necesitamos del Fileobjeto:

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()}`,  )})

Míralo en codepen: https://codepen.io/flaviocopes/pen/EzxdMm/

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase