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
# dom-input-files-dev

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
FileList
item
length

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報