Quiero mostrar los nombres de los archivos después de elegirlos. Entonces, ¿por qué la lista de archivos está vacía en el controlador onchange ?
Aquí está mi código:
window.onload = function () { let list = document.getElementById("demo"); let files = document.getElementById("addFileId").files; document.getElementById("addFileId").onchange = function () { console.log(files); console.log(files[0]); for (let i = 0; i < files.length; i++) { let li = document.createElement('li'); li.innerText = files[i].name; list.appendChild(li); } }; }; <input type="file" multiple class="form-control" name="file" id="addFileId" required> <ul id="demo"></ul>El problema es que el objeto de la lista de archivos se adquiere antes de que se active el evento de cambio. En el momento en que ocurre el evento, la información de la lista se ha vuelto obsoleta, mientras que el navegador ya ha adjuntado una nueva lista de archivos al nodo DOM. La solución es obtener la lista de archivos dentro del controlador de eventos:
window.onload = function () { let list = document.getElementById("demo"); let addFileId = document.getElementById("addFileId"); addFileId.onchange = function () { let files = addFileId.files; console.log(files); console.log(files[0]); for (let i = 0; i < files.length; i++) { let li = document.createElement('li'); li.innerText = files[i].name; list.appendChild(li); } }; };Sin embargo, señalaré que, de forma divertida, la muestra del autor de la pregunta funciona bien, sin modificar, en Firefox 91 ESR, y los comentaristas describen que también actúa de la misma manera en las versiones más nuevas. Aparentemente, Firefox, en lugar de crear una nueva lista, actualiza el objeto de lista de archivos existente. El cromo se comporta como se describe en la pregunta; No he probado un navegador basado en WebKit, pero imagino que actúa como este último. A partir del 2022-03-16, la especificación HTML dice que al cambiar la selección de archivos, el navegador debe
Actualice los archivos seleccionados del elemento para que represente la selección del usuario.
que puede interpretarse de cualquier manera. Por lo tanto, probablemente sea mejor no confiar en ninguno de los dos comportamientos.