FileList
注意：此功能在 Web Workers 中可用。
FileList 介面表示 HTML <input> 元素的 files 屬性返回的此類物件；這允許您訪問使用 <input type="file"> 元素選擇的檔案列表。它還用於在使用拖放 API 將檔案拖放到 Web 內容時使用的檔案列表；有關此用法的詳細資訊，請參閱 DataTransfer 物件。
所有 <input> 元素節點上都有一個型別為 FileList 的 files 屬性，允許訪問此列表中的項。例如，如果 HTML 包含以下檔案輸入：
html
<input id="fileItem" type="file" />
以下程式碼行將節點檔案列表中的第一個檔案作為 File 物件獲取。
js
const file = document.getElementById("fileItem").files[0];
這個介面曾是 建立不可修改列表的嘗試，並且至今仍然被支援，以免破壞現有程式碼。現代 API 使用基於 JavaScript 陣列 的型別來表示列表結構，從而提供了許多陣列方法，同時對其使用施加了額外的語義（例如，使其項只讀）。
這些歷史原因並不意味著開發者應該避免使用 FileList。您不會自己建立 FileList 物件，而是從 HTMLInputElement.files 等 API 獲取它們，而這些 API 沒有被棄用。但是，請注意與實際陣列在語義上的差異。
例項屬性
length只讀-
一個只讀值，指示列表中檔案的數量。
例項方法
示例
記錄檔名
在此示例中，我們將記錄使用者選擇的所有檔案的名稱。
HTML
html
<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>
CSS
css
.output {
overflow: scroll;
margin: 1rem 0;
height: 200px;
}
JavaScript
js
const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");
fileInput.addEventListener("change", () => {
for (const file of fileInput.files) {
output.innerText += `\n${file.name}`;
}
});
結果
規範
| 規範 |
|---|
| File API # filelist-section |
| HTML # dom-input-files-dev |
瀏覽器相容性
載入中…