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 の定義		 現行の標準

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
FileListChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 10Opera 完全対応 11.1Safari 完全対応 4WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 11.1Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 1.0
itemChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lengthChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連項目