El objeto FileList

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

Cuando tengas un formulario HTML con un input type="file" /elemento, cuando el usuario cargue uno o más archivos, interactuarás con un FileListobjeto.

Ese no es el único lugar donde puedes obtener un FileListobjeto. También lo obtendrás al interactuar con Arrastrar y soltar.

Siguiendo con los formularios, el tipo de entrada por defecto no permite cargar múltiples archivos.

Recuperará una FileList con un solo elemento y podrá recuperarla utilizando esta sintaxis:

input type="file" /

const input = document.querySelector('input')input.addEventListener('change', (e) = {  const fileList = input.files  const theFile = fileList[0]})

Al seleccionar cualquier elemento de un FileListobjeto se obtendrá un Fileobjeto. En este caso, solo tenemos uno, por lo que seleccionamos el elemento en la posición 0.

También recuperar puedeslo utilizando el item()método, especificando el índice:

const input = document.querySelector('input')input.addEventListener('change', (e) = {  const fileList = input.files  const theFile = fileList.item(0)})

Sin embargo, si se habilita la opción múltiple, al usar el multipleatributo ( input type="file" multiple /), FileList contendrá múltiples elementos.

Puedes obtener el recuento mirando la lengthpropiedad de FileList.

Este ejemplo carga los archivos cargados y los itera para imprimir el nombre de cada archivo:

input type="file" multiple /

const input = document.querySelector('input')input.addEventListener('change', (e) = {  const files = input.files  const filesCount = fileList.length  for (let i = 0; i  files.length; i++) {    const file = files[i]    alert(file.name)  }})

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