SYNCERのロゴ
アイキャッチ画像

FileList - ファイルの一覧

FileListは、ファイルの一覧を表すオブジェクトです。file typeのinput要素などから取得できます。

概要

名前
FileList
IDL
[Exposed=(Window,Worker), Serializable]
interface FileList {
  getter File? item(unsigned long index);
  readonly attribute unsigned long length;
};
仕様書
https://w3c.github.io/FileAPI/#dfn-filelist

チュートリアル

FileListは、input要素(HTMLInputElement.files)から取得できます。

<input type="file" multiple id="hoge">
var element = document.getElementById( "hoge" ) ;

element.onchange = function () {
	console.log( element.files ) ;
}

下記はデモです。適当に、ファイルを選択状態にしてみて下さい。選択したファイルが当サーバーに送信されることはないのでご安心下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
	input { width: 95% ; font-size: 16px ; }
</style>
</head>
<body>
	<input type="file" multiple id="hoge">
<hr>
	<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var resultElement = document.getElementById( "result" ) ;

element.onchange = function () {
	console.log( element.files ) ;
	resultElement.appendChild( new Text( element.files.length + "個のファイルを選択しました!!" ) ) ;
}
</script>
</body>
</html>

プロパティ

length

自身が含んでいるFileの数を返します。

メソッド

item()

インデックス番号を指定してFileを取得します。このメソッドは、ブラケット記法(例: [0])に置き換えられます。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
FileList 5.1+ 10+
item() 5.1+ 10+ 15+
length 7.1+ 10+ 15+ 7.0+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月4日 (水)
コンテンツを公開しました。