FileList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

この型のオブジェクトは、 HTML の <input> 要素の files プロパティで返されます。これにより、 <input type="file"> 要素で選択されているファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用している場合は、ウェブコンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は DataTransfer オブジェクトを見てください。

メモ: Gecko 1.9.2 より前は、input 要素は一度に 1 つのファイルだけ選択することができます。すなわち、 FileList に入るファイルは 1 つだけです。 Gecko 1.9.2 から、 input 要素の multiple 属性が true の場合、 FileList に複数のファイルが入ります。

ファイルリストの使用

すべての <input> 要素のノードには files 属性があり、これが FileList 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。

html
<input id="fileItem" type="file" />

次のコードの行は、ノードのファイルリスト内の最初のファイルを File オブジェクトとして取得します。

js
var file = document.getElementById("fileItem").files[0];

メソッドの概要

File item(index);

プロパティ

属性 型 説明
length integer 読み取り専用で、リスト内のファイル数を示します。

メソッド

item()

ファイルリスト内の指定された位置にあるファイルを表す File オブジェクトを返します。

File item(
  index
);

引数

index

リストから受け取るファイルの 0 から始まる位置です。

返値

要求されたファイルを表す File です。

例

この例では、input 要素を使用してユーザーが選択したすべてのファイルを反復処理します。

js
// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
var fileInput = document.getElementById("myfileinput");

// files は FileList オブジェクトです (NodeList と同様)
var files = fileInput.files;
var file;

// files を反復処理
for (var i = 0; i < files.length; i++) {
  // get item
  file = files.item(i);
  //or
  file = files[i];

  alert(file.name);
}

こちらが完全な例です。

html
<!doctype html>
<html>
  <head> </head>
  <body>
    <!-- multiple を設定して、複数のファイルが選択できるようにしています -->

    <input id="myfiles" multiple type="file" />
  </body>

  <script>
    var pullfiles = function () {
      // querySelector が好き
      var fileInput = document.querySelector("#myfiles");
      var files = fileInput.files;
      // files.length をキャッシュ
      var fl = files.length;
      var i = 0;

      while (i < fl) {
        // ループ内のファイル var をローカライズ
        var file = files[i];
        alert(file.name);
        i++;
      }
    };

    // input 要素の onchange を設定し pullfiles を呼び出すようにします。
    document.querySelector("#myfiles").onchange = pullfiles;

    //a.t
  </script>
</html>

仕様書

Specification
File API
# filelist-section
HTML Standard
# dom-input-files-dev

ブラウザーの互換性

BCD tables only load in the browser

関連情報