File APIを使ってみよう

このエントリーはjQuery Advent Calendar 2013の 5日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。)

今回はFile APIを利用してローカルファイルの内容をページに表示する方法を解説します。

File APIが利用できるブラウザではwindowオブジェクトにFileプロパティが設定されているので以下のようなスクリプトでFile APIが利用できるブラウザと利用できないブラウザで処理を切り分けることができます。

if(window.File){
	alert("File APIが利用できます");
}else{
	alert("File APIが利用できません");
}

サンプル1

ちなみにIEはIE10からFile APIが利用できます。

FileListオブジェクトの取得

File APIを利用するには、まずFileオブジェクトが格納されたFileListオブジェクトを取得する必要があります。type属性「file」が指定されたinput要素のfilesプロパティで取得できます。たとえば、ファイルが指定された際にFileListオブジェクトを取得するのは以下のようなスクリプトになります。

<input type="file" id="file">
if(window.File){
	$("#file").change(function(){
		console.log(this.files);
	});
}

サンプル2

Fileオブジェクトの取得

FileListオブジェクトにはファイルの情報が格納されたFileオブジェクトが配列のような形で格納されています。次はFileListオブジェクトからFileオブジェクトを取得してみましょう。FileListオブジェクトにはlengthプロパティがありますのでfor文で繰り返し処理を行ない取得することができます。

if(window.File){
	$("#file").change(function(){
		for(var i = 0;i<this.files.length ;i++){
			console.log(this.files[i]);
		}
	});
}

サンプル3

次は取得したファイルをページ上に表示してみます。

テキストファイルの表示

表示するにはFileReaderオブジェクトを利用します。FileReaderオブジェクトにloadイベントを指定しておけば取得したファイルの内容を取得することができます。

var reader = new FileReader();
reader.addEventListener('load', function() {
	$("p").html(reader.result);
});

FileReaderオブジェクトにloadイベントはテキストファイルの場合は以下のように実行します。FileReaderオブジェクトのreadAsTextメソッドを利用してテキストデータに変換します、第2引数には文字コードを指定します。変換が終了すると先ほど設定したloadイベントが実行されページ内にテキスト情報が表示されます。

$("#file").change(function(){
	for(var i = 0;i<this.files.length ;i++){
		reader.readAsText(this.files[i], 'UTF-8');
	}
});

サンプル4

画像ファイルの取得と表示

画像ファイルを取得して表示するにはreadAsDataURLメソッドを利用し一度data URIスキームに変換してからimg要素のsrc属性などに指定して表示します。

if(window.File){
	var reader = new FileReader();
	reader.addEventListener('load', function() {
		$("img").attr("src",reader.result);
	});
	$("#file").change(function(){
		for(var i = 0;i<this.files.length ;i++){
			reader.readAsDataURL(this.files[i]);
		}
	});
}

サンプル5

動画や音声ファイル

動画や音声ファイルをブラウザに読み込んで再生してしまうとメモリを結構利用します。その場合はURL.createObjectURL()を利用してローカルファイルを直接再生してしまいましょう。

<video autoplay></video>
if(window.File){
	$("#file").change(function(){
		for(var i = 0;i<this.files.length ;i++){
			$("video").attr("src",URL.createObjectURL(this.files[i]));
		}
	});
}

サンプル6

いかがでしたでしょうか?次回(明後日)はページへのドラッグ&ドロップでローカルファイルを読み取る方法について解説をします。

明日のjQuery Advent Calendar 2013@isoden_によるtraversingについての解説です。

関連エントリー

jQuery基礎文法最速マスター
jQueryのpropメソッドとattrメソッド
jQueryのstopメソッドとfinishメソッド
jQueryのmouseoverメソッドとmouseenterメソッドの違い
イベントデリゲートで理解するjQueryのonメソッド

スポンサードリンク

«jQueryのpropメソッドとattrメソッド | メイン | Androidのviewportに対する数値指定»