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 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 タイプを表示}