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