如果我在onchange之前获得文件列表，为什么所选文件的列表总是空的

Question

我想在选择文件后显示它们的名称。那么，为什么onchange处理程序中的文件列表是空的呢？

这是我的代码：

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>

Answer 1

问题是在触发更改事件之前获取文件列表对象。当事件实际发生时，列表中的信息已经过时，而浏览器已经向DOM节点附加了一个新的文件列表。解决方案是在事件处理程序中获取文件列表：

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);
}
};
};

然而，我要注意的是，有趣的是，询问者的样本在Firefox91ESR中工作得很好，没有修改，评论人士描述它在新版本中也起到了同样的作用。显然，Firefox不是创建一个新的列表，而是更新现有的文件列表对象。铬的行为与问题中描述的类似；我还没有测试过基于WebKit的浏览器，但我认为它的行为与后者类似。截至2022-03-16年，HTML规范规定，在更改文件选择时，浏览器应

更新元素的选定文件，使其代表用户的选择。

可以用任何一种方式进行解释。因此，最好不要依赖这两种行为。