HTMLInputElement: files プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

HTMLInputElement.files プロパティを通じて、<input type="file"> 要素で選択された FileList にアクセスできます。

値

選択されているファイルがあれば、それをリストする FileList オブジェクトです。HTMLInputElement が type="file" でない場合は、null が返ります。

例

以下の例は、HTMLInputElement.files プロパティにアクセスして、ユーザーが選択したそれぞれのファイルの名前、更新日時、サイズ、種類を出力する方法を示します。

HTML

html

<input id="files" type="file" multiple />

JavaScript

HTMLInputElement.files は、ファイルが選択されていなくても FileList を返すことに注意してください。この性質があるため、ファイルが選択されているかをチェックせずに for...of で走査しても安全です。

const fileInput = document.getElementById("files");
console.log(fileInput.files instanceof FileList); // 空でも true となる
for (const file of fileInput.files) {
 console.log(file.name); // ファイル名を表示
 let fileDate = new Date(file.lastModified);
 console.log(fileDate.toLocaleDateString()); // 日付を表示
 console.log(
 file.size < 1000 ? file.size : Math.round(file.size / 1000) + "KB",
 );
 console.log(file.type); // MIME タイプを表示
}