FileAPI
- HTML5 APIs
- UI ライブラリ
- テスト支援
- ドキュメント
- コード品質ツール
- バリデータ
- キー入力支援
- テストダブル
- ハイブリッドアプリケーション
- 継続的インテグレーション
FileAPIとは
FileAPIとはHTML5で追加された、Webアプリケーション上でローカルのファイルを扱うためのAPIです。
参考: File API -W3C
FileAPIの各ブラウザの対応状況(window.FileReaderがあるかどうか)
| ブラウザ | FileReader対応状況 |
|---|---|
| IE9以下 | × |
| IE 10,11 | ○ |
| Edge(v20) | ○ |
| Chrome(v44) | ○ |
| Firefox(v39) | ○ |
| Safari(v5.1.7) | × |
| Opera(v12.12) | ○ |
input type="file"
type属性に"file"を指定したinput要素から、ローカルのファイルを選択することが出来ます。
<input type="file" name="upload-file">
ブラウザによっては、input要素にローカルのファイルをドラッグしてドロップすることでファイルを選択することができます。
ドラッグ＆ドロップでファイル選択できるか。
| ブラウザ | input type="file"にファイルをドロップして選択 |
|---|---|
| IE9以下 | × |
| IE 10,11 | × |
| Edge(v20) | × |
| Chrome(v44) | ○ |
| Firefox(v39) | ○ |
| Safari(v5.1.7) | ○ |
| Opera(v12.12) | × |
input type="file"の要素の値(value)をJavaScriptで任意のものに変更することはできません。空文字のみ設定可能です。空文字を設定した場合は、ファイルが選択されていない状態になります。
fileInput.value = ''; // ファイルが選択されていない状態になる
FileReaderによるファイルの中身の取得
input要素でtype="file"を指定した要素から、ファイル(File)のリスト(FileList)を取得できます。multiple指定をしている場合は複数のファイルを選択できます。input要素から取得したファイルは以下のようなオブジェクトです。
var fileList = fileInput.files;
console.log(fileList);
FileAPI対応ブラウザの場合、ファイルの中身はFileReader使って非同期で取得することができます。以下は、ファイルの中身を取得するメソッドです。
- FileReader.readAsArrayBuffer(Blob|File)
- バッファに読み込まれた生のバイナリデータを指すArrayBufferを取得
- FileReader.readAsDataURL(Blob|File)
- ファイルのデータを示す"data:"で始まるURLを取得
- FileReader.readAsText(Blob|File)
- バッファに読み込まれた生のバイナリデータを文字列で解釈したものをを取得
FireReaderにはonabort,onerror,onload,onloadstart,onloadend,onprogressのイベントハンドラがあり、取得したデータはイベントハンドラを使って取得します。
以下、読み込まれたファイルが画像ファイルならimg要素を生成、それ以外なら中身をテキストとして読み込んで表示する例です。
// FileReaderのインスタンスを生成
var reader = new FileReader();
if (file.type.match('image.*')) {
// 画像ファイルの場合
// onloadハンドラ
reader.onload = function(e) {
// 取得した結果を表示
var $img = $('<img src="' + e.target.result + '">');
$('.result').append($img);
};
// ファイルの中身をデータURLとして取得
reader.readAsDataURL(file);
} else{
// onloadハンドラ
reader.onload = function(e) {
// 取得した結果を表示
var $p = $('<p></p>');
$p.text(e.target.result);
$('.result').append($p);
};
// ファイルの中身(テキスト)を取得
reader.readAsText(file);
}
ファイルのドロップ
ローカルファイルをDOM要素にドラッグ＆ドロップしたとき、dropイベントハンドラでドロップされたファイルを取得することが出来ます。
// デフォルト動作(ブラウザでファイルを開く)をキャンセル
e.preventDefault();
var file = e.originalEvent.dataTransfer.files[0];
if (!file) {
return;
}
var reader = new FileReader();
// onloadハンドラ
reader.onload = function(e) {
// 取得した結果を表示
var $p = $('<p></p>');
$p.text(e.target.result);
$('.result').append($p);
};
reader.readAsText(file);
});
$('.dropTarget').bind('dragover', function(e){
// デフォルト動作(ブラウザでファイルを開く)をキャンセル
e.preventDefault();
});
dropイベントでのファイル取得(dataTransfer.files)は、一部ブラウザは対応しておらず、上記コードは動作しません。
以下、対応状況です。
| ブラウザ | dataTransfer.filesの対応状況 |
|---|---|
| IE9以下 | × |
| IE 10,11 | × |
| Edge(v20) | × |
| Chrome(v44) | ○ |
| Firefox(v39) | ○ |
| Safari(v5.1.7) | ○※ |
| Opera(v12.12) | ○ |
(※SafariはFileの取得は可能だがFileReader未対応のため中身の取得は不可)