我想在選擇檔案后顯示檔案名。那么，為什么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>uj5u.com熱心網友回復：
問題是檔案串列物件是在更改事件觸發之前獲取的。到事件實際發生時，串列中的資訊已經過時，而瀏覽器已經將新檔案串列附加到 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);
}
};
};
然而，我會注意到，有趣的是，提問者的示例在 Firefox 91 ESR 中作業得很好，未經修改，并且評論者描述它在新版本中的行為也相同。顯然 Firefox 并沒有創建一個新串列，而是更新了現有的檔案串列物件。Chromium 的行為與問題中描述的一樣；我沒有測驗過基于 WebKit 的瀏覽器，但我想它的行為類似于后者。截至 2022 年 3 月 16 日，HTML 規范說，在更改檔案選擇時，瀏覽器應該
更新element的選定檔案，使其代表用戶的選擇。
這可以解釋為任何一種方式。所以最好不要依賴任何一種行為。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/445093.html
標籤：javascript html