FileList
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
メモ: この機能はウェブワーカー内で利用可能です。
FileList インターフェイスは、HTML の <input> 要素の files プロパティによって返されるこの型のオブジェクトを表します。これにより、<input type="file"> 要素で選択されたファイルのリストにアクセスできます。また、ドラッグ＆ドロップ API を使用する際、ウェブコンテンツにドロップされたファイルのリストにも使用されています。この使い方の詳細は、DataTransfer オブジェクトを参照してください。
すべての <input> 要素のノードには files 属性があり、これが FileList 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。
<input id="fileItem" type="file" />
次のコードの行は、ノードのファイルリスト内の最初のファイルを File オブジェクトとして取得します。
const file = document.getElementById("fileItem").files[0];
このインターフェイスは変更不可能なリストを作成しようする試みであり、既にそれを使用しているコードを壊さないために対応が続いているだけです。現行の API は、JavaScript の配列に基づく型を使用してリスト構造を表します。これにより、多くの配列メソッドが利用できると同時に、その使用法に追加の意味づけ（アイテムの読み取り専用化など）が課されます。
こうした歴史的な理由があるからといって、開発者として FileList を避ける必要があるわけではありません。FileList オブジェクトは自分で作成するものではなく、HTMLInputElement.files などの API から取得します。これらの API は非推奨になっていません。ただし、実際の配列との意味づけの違いには注意が必要です。
インスタンスプロパティ
length読取専用-
読み取り専用の値で、リスト内のファイル数を示します。
インスタンスメソッド
例
ファイル名のログ出力
この例では、ユーザーが選択したすべてのファイルの名前をログ出力します。
HTML
<input id="myfiles" multiple type="file" />
<pre class="output">選択されたファイル:</pre>
CSS
.output {
overflow: scroll;
margin: 1rem 0;
height: 200px;
}
JavaScript
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 |