El objeto FileList

 

 

 

El objeto filelist 1

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. >Canastillas Bebe Gratis ¿Cómo se consiguen? ¿VERDAD O ENGAÑO?

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

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

 

El objeto filelist 1
El objeto filelist 1

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

 

 

Update cookies preferences