JavaScript プログラミング講座


FileReader クラスについて



・FileReader クラスについて
・FileReader クラスのプロパティについて
・読み込みを開始する
・読み込み中の進捗状況を取得する
・読み込み完了後に結果を得る
・読み込み処理を中止する

前のページに戻る

　

FileReader クラスについて

　


■FileReader クラスについて


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

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

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

上に戻る

　

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

　


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

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

上に戻る

　

読み込みを開始する

　
　
■読み込みを開始する（テキスト文字列を得る）
■読み込みを開始する（ArrayBuffer オブジェクトを得る）
■読み込みを開始する（Data URI Scheme 文字列を得る）
■読み込みを開始する（バイナリデータの文字列を得る）
　


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


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 読み込みを開始したときに１度だけ実行されるイベント
onprogress 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("loadstart",function(e){
			console.log("読み込みを開始した");
		});

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

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

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

    //-->
    </script>

  </body>
</html>
　

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


現在の読み込み処理の状態を取得するには、readyState プロパティを使用します。
　
以下の定数が得られます。
　
定数番号説明
FileReader.EMPTY0読み込み処理を１度も開始していない。
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();
　

上に戻る

　
前のページに戻る