この型のオブジェクトは、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];
// 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>
| 表示内容： |
| 表示内容： |