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])に置き換えられます。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
FileList | ● | ● | ● 5.1+ | ● | ● 10+ | ● | ● | ● |
item() | ● | ● | ● 5.1+ | ● | ● 10+ | ● 15+ | ● | ● |
length | ● | ● | ● 7.1+ | ● | ● 10+ | ● 15+ | ● 7.0+ | ● 4.0+ |
関連記事
- DataTransfer
- DataTransferは、ドラッグ操作やクリップボード操作によって転送されるデータを管理するための機能を備えたインターフェイスです。
- IDLリファレンス
- WHATWGやW3Cで定義されているDOMなどのWeb APIの仕様を、サンプルコードやデモ付きでまとめています。
- FileReader()
- FileReader()は、FileReaderのコンストラクタです。新しいオブジェクトを作成します。
- FormData.delete()
- delete()は、FormDataのメソッドです。フォームのデータを削除します。