FileReader インターフェイス

　FileReader インターフェイスは、File オブジェクトの内容をデータとして取得するためのプロパティ、メソッド、イベントが定義されたインターフェイスです。

FileReader 継承図

Web API

└ DOM

├ Event ... AnimationEvent、ClipboardEventなど

├─ EventTarget

└─ FileReader

　読み込むことができるのは Blob や File オブジェクトで、データタイプをメソッドで指定して解析します。
　詳しくは Example を参照してください。

　非同期でサーバーからのファイル読み込み（AJAX）については XMLHttpRequest を参照してください。

- ad -

FileReader について

FileReader で解析できるのはローカル PC のファイルのみ

　FileReader で解析できるのはローカル PC のファイルのみという解説がありますが、これについて調べてみました。

　FileReader で扱うことができるのは Blob や File オブジェクトです。URL を指定することでファイルを読み込み File オブジェクトを生成する方法が Web API に用意されていません。 File インターフェイスに URL を指定してファイルを読み込む手段がないために、併せて FileReader でもローカル PC 以外のファイルを読み込むことができないです。

　File オブジェクトを取得する方法には <input type="file" > を使用する方法がありますが、この方法で取得できるのはローカル PC のファイルだけです。

　そのために、FileReader で扱えるのはローカル PC のファイルのみという解説になっていると思われます。

　URL.createObjectURL() や MediaStream から取得する方法の解説があるのですが、URL.createObjectURL() メソッドの引数は File オブジェクトであって、URL を指定することで取得できるファイルのことではありません。
　MediaStream もデータ自体を扱いますが、URL から取得できるファイルのことではありません。

コンストラクター(Constructor)

　FileReader オブジェクトを生成します（正確にはインスタンス、オブジェクスはインスタントも含む広義）。 File オブジェクトをデータ化するためには FileReader オブジェクトを生成します。

const file_reader = new FileReader();

引数: なし
返り値: FileReader インスタンス

プロパティ(Properties)

プロパティ

概要

.error

エラーを DOMException で返す

.readyState

ファイルの読み込み状態を unsigned short 型の数値で返す。

値	状態	説明
0	EMPTY	読み込み前
1	LOADING	読み込み中
2	DONE	読み込みが完了

.result

ファイルの内容を取得

メソッド(Methods)

　ファイルのデータ形式（データタイプ）によって読むこむためのメソッドを選択しなければなりません。

メソッド	概要
.abort()	リクエストの中止を実行
.readAsArrayBuffer()	ファイルの内容を固定長のバイナリデータとして読み込む
.readAsBinaryString()	ファイルの内容をバイナリーデータとして読み込む。データは文字列として扱う
.readAsDataURL()	ファイルの内容をデータとして読み込む。画像はこの読み込みメソッドを使用
.readAsText()	テキストデータとして読み込む

イベント( Event )

　FileReader インターフェイスに独自のイベントはないようです。

　以下は FileReader で機能するイベントです。

　その他は GlobalEventHandlers を参照してください。

Example

　FileReader の例です。確認ボタンをクリックすると実行します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

HTML内容

CSS内容

Script内容

// get_Files() 関数の定義
function get_Files(){
	for( var i = 0; i < event.target.files.length; i++ ){
		// 読み込むファイル URL を url_file に一時保存
		var url_file = event.target.files[i];
		// FileReader インスタンスの生成
		const fl_read = new FileReader();

// テキストファイルとバイナリファイルで読み込みメソッドが変わる
		console.log( url_file.type )
		if(url_file.type.indexOf("text") == 0){

fl_read.onload = function( event ){
				var element_txtarea = document.createElement('textarea');
				element_txtarea.style = "width:100%;height:20em;";
				element_txtarea.value = event.target.result;
				document.getElementById("viewer").appendChild( element_txtarea );
			};

fl_read.readAsText(url_file);

} else if( url_file.type.indexOf("image") == 0 ){
		// 画像の場合はこの行が処理される
			fl_read.onload = function(event) {
				var element_img = document.createElement('img');
				element_img.src = event.target.result;
				document.getElementById("viewer").appendChild( element_img );
			}
			fl_read.readAsDataURL(url_file);

} else {
			document.getElementById("viewer").innerHTML = "ファイルのタイプが対象外です";
		}
	}

}