FileList

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

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

ファイルリストの使用

すべての <input> 要素ノードは、このリストの項目にアクセスするための files 配列を持ちます。たとえば、HTML が次の file input を含むとします：

<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 は 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++) {

    // 項目の取得
    file = files.item(i);
    // または
    file = files[i];

    alert(file.name);
}

完全な例はこちら。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<!--multiple は複数選択の許可を設定します。-->

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

</body>

<script>

var pullfiles=function(){ 
    // love the query selector
    var fileInput = document.querySelector("#myfiles");
    var files = fileInput.files;
    // cache files.length 
    var fl=files.length;
    var i=0;

    while ( i < fl) {
        // localize file var in the loop
        var file = files[i];
        alert(file.name);
        i++;
    }    
}

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

//a.t
</script>

</html>

仕様

関連項目