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 FileList
objeto.
Ese no es el único lugar donde puedes obtener un FileList
objeto. 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 FileList
objeto se obtendrá un File
objeto. 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 multiple
atributo ( input type="file" multiple /
), FileList contendrá múltiples elementos. >Canastillas Bebe Gratis ¿Cómo se consiguen? ¿VERDAD O ENGAÑO?
Puedes obtener el recuento mirando la length
propiedad 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:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- Cómo comprobar si un elemento DOM tiene una clase
El objeto FileList
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. Descub
programar
es
https://aprendeprogramando.es/static/images/programar-el-objeto-filelist-2004-0.jpg
2024-10-31
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente