--- title: FileList slug: Web/API/FileList tags: - API - File API - Files translation_of: Web/API/FileList ---
{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}

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

注: {{Gecko("1.9.2")}} 以下では、input 要素は一度に 1 つのファイルだけサポートします。これは、FileList には 1 つのファイルだけが含まれることを意味します。{{Gecko("1.9.2")}} から、input 要素の multiple 属性が true の場合、FileList は複数ファイルを含められます。

ファイルリストの使用

すべての <input> 要素ノードは、その上に FileList 型の files 属性を持ち、このリスト内の項目へのアクセスを可能にします。例えば、HTML が以下のファイル入力を含んでいるとします。

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

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

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

メソッドの概要

File item(index);

プロパティ

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

メソッド

item()

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

 File item(
   index
 );
パラメータ
index
リストから扱うための 0 ベースのインデックス。
戻り値

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

例

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

// 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);
}

完全な例はこちら。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!-- multiple は複数のファイルを選択できるように設定されています。-->

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

</body>

<script>

var pullfiles=function(){
    // クエリセレクターが好き
    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>

仕様

仕様書 ステータス コメント
{{SpecName('File API', '#filelist-section', 'FileList')}} {{Spec2('File API')}}
{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}} {{Spec2('HTML WHATWG')}}

ブラウザの互換性

{{Compat("api.FileList")}}

関連項目