FileList
この型のオブジェクトは、HTML <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>
仕様
仕様書 | ステータス | コメント |
---|---|---|
File API FileList の定義 |
草案 | |
HTML Living Standard selected files の定義 |
現行の標準 |
ブラウザの互換性
BCD tables only load in the browser