JavaScript プログラミング講座

 

FileReader クラスについて

 


■FileReader クラスについて


FileReader クラスは、HTML5 世代の機能です。
 
http://www.w3.org/TR/FileAPI/#dfn-filereader (Working Draft)
 
FileReader クラスを使用すると、BlobFile オブジェクトが保有するバッファの中身に、読み取りアクセスを行う事ができます
 

■ブラウザが FileReader クラスをサポートしているか調べる

 
window.FileReader が真であるか比較します。
 
InternetExplorer 9 以前では、対応していません。
 
Safari 5 以前では、対応していません。
 
 


 

FileReader クラスのプロパティについて

 


■FileReader クラスのプロパティ一覧

 
FileReader クラスで利用可能な、プロパティの一覧です。
 
プロパティ名説明
readyStateNumber現在の読み込み処理の状態を取得する(読み取り専用)
result*読み込み成功後に、中身のデータを取得する。(読み取り専用)
errorDOMError読み込み失敗後に、エラーオブジェクトを取得する。(読み取り専用)
 


 

読み込みを開始する

 
 
 


■読み込みを開始する(テキスト文字列を得る)


FileReader.readAsText() メソッドを使用します。
 
テキスト文字列を得るために、ファイル読み込みを開始します。
 
このメソッドは、非同期実行です。
 
読み込みが成功したか調べるには、onload イベントを使用します。
 
読み込み成功後に、データの中身を取得するには、result プロパティを使用します。
 
FileReader.readAsText( Blob , "文字セット" ) :Void
第01引数 BlobBlob や File オブジェクトを指定する。
第02引数(略可)StringBlob オブジェクト内の文字セットを指定する。省略した場合、UTF-8 と解釈する。
戻り値 Voidなし。
 
■第02引数(文字セット)
 
テキストファイルの、正確な文字コードを指定します。
 
省略した場合、UTF-8 形式のテキストとみなします。
 
テキストファイルの文字コードは、自動的に類推される事はありません。
 
Blob オブジェクトのコンテンツタイプに、文字セット情報を含んでいたとしても、考慮されません。
 
■取得例
 
Blob オブジェクト内のバッファの読み込みを開始する(UTF-8 と解釈してテキスト文字列を得る)

// ------------------------------------------------------------
// Blob オブジェクトを作成(UTF-8 形式のプレーンテキスト)
// ------------------------------------------------------------
var blob = new Blob(["文字列テスト"] , {type:"text/plain"});

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み成功時に実行されるイベント
// ------------------------------------------------------------
file_reader.onload = function(e){
	// 出力テスト
	console.log(file_reader.result); // "文字列テスト"
};

// ------------------------------------------------------------
// 読み込みを開始する(UTF-8 と解釈してテキスト文字列を得る)
// ------------------------------------------------------------
file_reader.readAsText(blob);
 
Blob オブジェクト内のバッファの読み込みを開始する(Shift-JIS と解釈してテキスト文字列を得る)

// ------------------------------------------------------------
// Blob オブジェクトを作成(Shift-JIS 形式のプレーンテキスト)
// ------------------------------------------------------------
var blob = new Blob([new Uint8Array([ 0x82,0xa0 , 0x82,0xa2 , 0x82,0xa4 ])] , {type:"text/plain;charset=Shift-JIS"});

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み成功時に実行されるイベント
// ------------------------------------------------------------
file_reader.onload = function(e){
	// 出力テスト
	console.log(file_reader.result); // "あいう"
};

// ------------------------------------------------------------
// 読み込みを開始する(Shift-JIS と解釈してテキスト文字列を得る)
// ------------------------------------------------------------
file_reader.readAsText(blob , "Shift-JIS");
 

■読み込みを開始する(ArrayBuffer オブジェクトを得る)


FileReader.readAsArrayBuffer() メソッドを使用します。
 
ArrayBuffer オブジェクトを得るために、ファイル読み込みを開始します。
 
このメソッドは、非同期実行です。
 
読み込みが成功したか調べるには、onload イベントを使用します。
 
読み込み成功後に、データの中身を取得するには、result プロパティを使用します。
 
FileReader.readAsArrayBuffer( Blob ) :Void
第01引数 BlobBlob や File オブジェクトを指定する。
戻り値 Voidなし。
 
■第01引数(Blob 型)
 
読み取りアクセスしたい Blob や File オブジェクトを指定します。
 
slice() メソッドを使って、読み取る範囲を限定することもできます。
 
大容量のファイルを読み取る方法は、こちらで解説しています。
 
■取得例
 
ファイルの読み込みを開始する(ArrayBuffer オブジェクトを得る)

<html>
  <body>

    <form>

      <input type="file" id="aaa" >

    </form>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var input_file = document.getElementById("aaa");

	// ------------------------------------------------------------
	// 値が変化した時に実行されるイベント
	// ------------------------------------------------------------
	input_file.onchange = function (){

		// ファイルが選択されたか
		if(!(input_file.value)) return;

		// FileReader クラスに対応しているか
		if(!(window.FileReader)) return;

		// ------------------------------------------------------------
		// File オブジェクトを取得(HTML5 世代)
		// ------------------------------------------------------------
		// ファイルリストを取得
		var file_list = input_file.files;
		if(!file_list) return;

		// 0 番目の File オブジェクトを取得
		var file = file_list[0];
		if(!file) return;

		// ------------------------------------------------------------
		// FileReader オブジェクトを生成
		// ------------------------------------------------------------
		var file_reader = new FileReader();

		// ------------------------------------------------------------
		// 読み込み成功時に実行されるイベント
		// ------------------------------------------------------------
		file_reader.onload = function(e){

			// Uint8Array オブジェクトを作成
			var ary_u8 = new Uint8Array(file_reader.result);

			// 出力テスト
			console.log(ary_u8);
		};

		// ------------------------------------------------------------
		// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
		// ------------------------------------------------------------
		file_reader.readAsArrayBuffer(file);
	};

    //-->
    </script>

  </body>
</html>
 

■読み込みを開始する(Data URI Scheme 文字列を得る)


FileReader.readAsDataURL() メソッドを使用します。
 
Data URI Scheme 文字列を得るために、ファイル読み込みを開始します。
 
このメソッドは、非同期実行です。
 
読み込みが成功したか調べるには、onload イベントを使用します。
 
読み込み成功後に、データの中身を取得するには、result プロパティを使用します。
 
FileReader.readAsDataURL( Blob ) :Void
第01引数 BlobBlob や File オブジェクトを指定する。
戻り値 Voidなし。
 
■コンテンツタイプについて
 
Blob オブジェクトを変換する場合、コンテンツタイプの設定は正確である必要があります。
 
コンテンツタイプに設定した文字列が、そのまま採用されます。
 
File オブジェクトを変換する場合、コンテンツタイプは自動的に判別されます。
 
■取得例
 
Blob オブジェクト内のバッファの読み込みを開始する(Data URI Scheme 文字列を得る)

// ------------------------------------------------------------
// Blob オブジェクトを作成(UTF-8 形式のプレーンテキスト)
// ------------------------------------------------------------
var blob = new Blob(["あいう"] , {type:"text/plain;charset=UTF-8"});

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み成功時に実行されるイベント
// ------------------------------------------------------------
file_reader.onload = function(e){
	// 出力テスト
	console.log(file_reader.result); // "data:text/plain;charset=UTF-8;base64,44GC44GE44GG"
};

// ------------------------------------------------------------
// 読み込みを開始する(Data URI Scheme 文字列を得る)
// ------------------------------------------------------------
file_reader.readAsDataURL(blob);
 
ファイルの読み込みを開始する(Data URI Scheme 文字列を得る)

<html>
  <body>

    <form>

      <input type="file" id="aaa" >

    </form>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var input_file = document.getElementById("aaa");

	// ------------------------------------------------------------
	// 値が変化した時に実行されるイベント
	// ------------------------------------------------------------
	input_file.onchange = function (){

		// ファイルが選択されたか
		if(!(input_file.value)) return;

		// FileReader クラスに対応しているか
		if(!(window.FileReader)) return;

		// ------------------------------------------------------------
		// File オブジェクトを取得(HTML5 世代)
		// ------------------------------------------------------------
		// ファイルリストを取得
		var file_list = input_file.files;
		if(!file_list) return;

		// 0 番目の File オブジェクトを取得
		var file = file_list[0];
		if(!file) return;

		// ------------------------------------------------------------
		// FileReader オブジェクトを生成
		// ------------------------------------------------------------
		var file_reader = new FileReader();

		// ------------------------------------------------------------
		// 読み込み成功時に実行されるイベント
		// ------------------------------------------------------------
		file_reader.onload = function(e){

			// 出力テスト
			console.log(file_reader.result);
		};

		// ------------------------------------------------------------
		// 読み込みを開始する(Data URI Scheme 文字列を得る)
		// ------------------------------------------------------------
		file_reader.readAsDataURL(file);
	};

    //-->
    </script>

  </body>
</html>
 

■読み込みを開始する(バイナリデータの文字列を得る)


FileReader.readAsBinaryString() メソッドを使用します。
 
バイナリデータの文字列を得るために、ファイル読み込みを開始します。
 
このメソッドは、一部のブラウザで動作します。
 
仕様書には含まれていないようです。
 
このメソッドは、非同期実行です。
 
読み込みが成功したか調べるには、onload イベントを使用します。
 
読み込み成功後に、データの中身を取得するには、result プロパティを使用します。
 
FileReader.readAsBinaryString( Blob ) :Void
第01引数 BlobBlob や File オブジェクトを指定する。
戻り値 Voidなし。
 
■ Base64 文字列に変換する
 
「バイナリデータの文字列」は、「Base64 文字列」に変換する事ができます。
 
相互変換については、こちらで解説しています。
 
■取得例
 
Blob オブジェクト内のバッファの読み込みを開始する(バイナリデータの文字列を得る)

// ------------------------------------------------------------
// Blob オブジェクトを作成(UTF-8 形式のプレーンテキスト)
// ------------------------------------------------------------
var blob = new Blob(["あいう"] , {type:"text/plain;charset=UTF-8"});

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み成功時に実行されるイベント
// ------------------------------------------------------------
file_reader.onload = function(e){
	// バイナリデータの文字列を取得
	var binary = file_reader.result;

	// バイナリデータの文字列を Base64 に変換
	var base64 = btoa(binary);

	// 出力テスト
	console.log(binary);
	console.log(base64); // "44GC44GE44GG"
};

// ------------------------------------------------------------
// 読み込みを開始する(バイナリデータの文字列を得る)
// ------------------------------------------------------------
file_reader.readAsBinaryString(blob);
 


 

読み込み中の進捗状況を取得する

 
 
 


読み込み中の進捗状況を取得するイベント一覧

 
読み込み中の進捗状況を取得するイベントは、以下の種類があります。
 
イベント名 解説
onloadstart ProgressEvent 読み込みを開始したときに1度だけ実行されるイベント
onprogress ProgressEvent 読み込み中に、繰り返し実行されるイベント
onloadend ProgressEvent 読み込みが完了したときに1度だけ実行されるイベント(成功失敗に関係無く)
 
ファイルの読み込み進捗状況を調べる

<html>
  <body>

    <form>

      <input type="file" id="aaa" >

    </form>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var input_file = document.getElementById("aaa");

	// ------------------------------------------------------------
	// 値が変化した時に実行されるイベント
	// ------------------------------------------------------------
	input_file.onchange = function (){

		// ファイルが選択されたか
		if(!(input_file.value)) return;

		// FileReader クラスに対応しているか
		if(!(window.FileReader)) return;

		// ------------------------------------------------------------
		// File オブジェクトを取得(HTML5 世代)
		// ------------------------------------------------------------
		// ファイルリストを取得
		var file_list = input_file.files;
		if(!file_list) return;

		// 0 番目の File オブジェクトを取得
		var file = file_list[0];
		if(!file) return;

		// ------------------------------------------------------------
		// FileReader オブジェクトを生成
		// ------------------------------------------------------------
		var file_reader = new FileReader();

		// ------------------------------------------------------------
		// 読み込みを開始したときに1度だけ実行されるイベント
		// ------------------------------------------------------------
		file_reader.addEventListener("loadstart",function(e){
			console.log("読み込みを開始した");
		});

		// ------------------------------------------------------------
		// 読み込み中に、繰り返し実行されるイベント
		// ------------------------------------------------------------
		file_reader.addEventListener("progress",function(e){
			console.log("読み込中: " + e.loaded + " / " + e.total + "Byte");
		});

		// ------------------------------------------------------------
		// 読み込みが完了したときに1度だけ実行されるイベント
		// ------------------------------------------------------------
		file_reader.addEventListener("loadend",function(e){
			console.log("読み込みが完了した");
		});

		// ------------------------------------------------------------
		// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
		// ------------------------------------------------------------
		file_reader.readAsArrayBuffer(file);
	};

    //-->
    </script>

  </body>
</html>
 

■読み込み処理の状態を取得する


現在の読み込み処理の状態を取得するには、readyState プロパティを使用します。
 
以下の定数が得られます。
 
定数番号説明
FileReader.EMPTY0読み込み処理を1度も開始していない。
FileReader.LOADING1読み込み処理中である。
FileReader.DONE2読み込み処理が完了している。(成功失敗に関係なく)
 
■取得例
 
readyState プロパティの変化を確認する

// ------------------------------------------------------------
// 100 Mbyte 相当の Blob オブジェクトを作成
// ------------------------------------------------------------
var blob = new Blob([new ArrayBuffer(1024 * 1024 * 100)]);

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// 出力テスト
console.log(file_reader.readyState);

// ------------------------------------------------------------
// 一定の時間隔で実行する
// ------------------------------------------------------------
setInterval(function(){

	// 出力テスト
	console.log(file_reader.readyState);

},1000/60);

// ------------------------------------------------------------
// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
// ------------------------------------------------------------
file_reader.readAsArrayBuffer(blob);
 


 

読み込み完了後に結果を得る

 
 


読み込み完了後の結果を取得するイベント一覧

 
読み込み完了後の結果を取得するイベントは、以下の種類があります。
 
イベント名 解説
onload ProgressEvent 読み込みが成功したときに実行されるイベント(成功時のみ)
onerror ProgressEvent 読み込みが失敗したときに実行されるイベント(失敗時のみ)
onloadend ProgressEvent 読み込みが完了したときに実行されるイベント(成功失敗に関係無く)
 
ファイルの読み込み結果を調べる

<html>
  <body>

    <form>

      <input type="file" id="aaa" >

    </form>

    <script type="text/javascript">
    <!--
	// "aaa" という ID 属性のエレメントを取得する
	var input_file = document.getElementById("aaa");

	// ------------------------------------------------------------
	// 値が変化した時に実行されるイベント
	// ------------------------------------------------------------
	input_file.onchange = function (){

		// ファイルが選択されたか
		if(!(input_file.value)) return;

		// FileReader クラスに対応しているか
		if(!(window.FileReader)) return;

		// ------------------------------------------------------------
		// File オブジェクトを取得(HTML5 世代)
		// ------------------------------------------------------------
		// ファイルリストを取得
		var file_list = input_file.files;
		if(!file_list) return;

		// 0 番目の File オブジェクトを取得
		var file = file_list[0];
		if(!file) return;

		// ------------------------------------------------------------
		// FileReader オブジェクトを生成
		// ------------------------------------------------------------
		var file_reader = new FileReader();

		// ------------------------------------------------------------
		// 読み込みが成功したときに実行されるイベント
		// ------------------------------------------------------------
		file_reader.addEventListener("load",function(e){
			console.log("読み込みが成功した");

			// データの中身を取得
			console.log(file_reader.result);
		});

		// ------------------------------------------------------------
		// 読み込みが失敗したときに実行されるイベント
		// ------------------------------------------------------------
		file_reader.addEventListener("error",function(e){
			console.log("読み込みが失敗した");

			// エラーオブジェクトを取得
			console.log(file_reader.error);
		});

		// ------------------------------------------------------------
		// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
		// ------------------------------------------------------------
		file_reader.readAsArrayBuffer(file);
	};

    //-->
    </script>

  </body>
</html>
 

■読み込み成功後に、中身のデータを取得する


読み込みが成功したか調べるには、onload イベントを使用します。
 
読み込み成功後に、データの中身を取得するには、result プロパティを使用します。
 
実行したメソッドによって、データの中身が以下のように変化します。
 
実行したメソッド得られる型説明
readAsText()Stringテキストとして読み込み、文字列を得る。
readAsArrayBuffer()ArrayBufferバイナリとして読み込み、ArrayBuffer オブジェクトを得る。
readAsDataURL()Stringバイナリとして読み込み、Data URI Scheme 文字列を得る。
readAsBinaryString()Stringバイナリとして読み込み、バイナリデータの文字列を得る。
 

■読み込み失敗後に、エラーの結果を取得する


読み込みが失敗したか調べるには、onerror イベントを使用します。
 
読み込み失敗後に、エラーオブジェクトを取得するには、error プロパティを使用します。
 
大容量のファイルを一度に読み込もうとした場合、必ず失敗するでしょう。
 
大容量のファイルを読み取る方法は、こちらで解説しています。
 
読み込みの失敗を確認する

// ------------------------------------------------------------
// 100 Mbyte 相当の Blob オブジェクトを作成
// ------------------------------------------------------------
var blob = new Blob([new ArrayBuffer(1024 * 1024 * 100)]);

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み失敗時に実行されるイベント
// ------------------------------------------------------------
file_reader.onerror = function(e){

	// 出力テスト
	console.log(file_reader.error);

};

// ------------------------------------------------------------
// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
// ------------------------------------------------------------
file_reader.readAsArrayBuffer(blob);

// ------------------------------------------------------------
// 読み込みを中止する
// ------------------------------------------------------------
file_reader.abort();
 


 

読み込み処理を中止する

 


■読み込み処理を中止する


読み込み処理を中止するには、abort() メソッドを使用します。
 
読み込み処理が、実際に中止されたか調べるには、onabort イベントを使用します。
 
読み込み処理が中止された場合、「読み込み失敗」となります。
 
よって、onerror イベントも発行されます。
 
readyState が、FileReader.LOADING 以外となるタイミングで実行した場合、何も起こりません。
 
読み込みの中止を確認する

// ------------------------------------------------------------
// 100 Mbyte 相当の Blob オブジェクトを作成
// ------------------------------------------------------------
var blob = new Blob([new ArrayBuffer(1024 * 1024 * 100)]);

// ------------------------------------------------------------
// FileReader オブジェクトを生成
// ------------------------------------------------------------
var file_reader = new FileReader();

// ------------------------------------------------------------
// 読み込み中止時に実行されるイベント
// ------------------------------------------------------------
file_reader.onabort = function(e){

	// 出力テスト
	console.log(file_reader.error);

};

// ------------------------------------------------------------
// 読み込みを開始する(ArrayBuffer オブジェクトを得る)
// ------------------------------------------------------------
file_reader.readAsArrayBuffer(blob);

// ------------------------------------------------------------
// 読み込みを中止する
// ------------------------------------------------------------
file_reader.abort();