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 July 2015.

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 で走査しても安全です。

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

仕様書

Specification
HTML Standard
# dom-input-files-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報