FileReaderの詳細とインスタンス---画像ファイルを読み取り、表示

「HTML 5のFileオブジェクトプローブ」では、ファイルをバイナリ文字列として読み取り、xhrを介してバックエンドに送信してインタラクションを形成するために使用されたFileReaderを使用しました.File APIの一部として、FileReaderはファイルの読み取りに特化しており、W 3 Cの定義に従って、FileReaderインタフェースは「ファイルの読み取り方法と読み取り結果を含むイベントモデルを提供する」.
次に、FileReaderの方法とイベントモデルを逐一理解し、最終的には、FileReaderを適用するインスタンスプログラムを使用します.この例では、FileReaderブラウザをサポートするユーザーを使用して、file inputを使用して画像ファイルを選択し、バックグラウンドを介さずに画像をページに表示することができます.次のリンクはこの例を指しています.注目すべきは、Firefox 3.6+とChrome 6.0+だけがFileReaderインタフェースを実現していることです.
これをクリックして最終効果を表示
これまでのウェブアプリケーションでは、ユーザが選択した画像ファイルをバックエンドに転送し、バックエンドに格納してURLをフロントエンドに戻し、フロントエンドにこのURLで画像を表示するのが一般的でした.FileReaderの突破点は、JavaScriptがファイルを処理する能力を持ち、ユーザーのパソコンに格納されているファイルを非同期で読み取ることができることである.ここでいうファイルは、JavaScriptにとってはFileオブジェクトであり、FileReaderがファイルを読み取るすべての方法はこれに依存し、Fileオブジェクトについてまだよく知られていない場合、まず「HTML 5のFileオブジェクトプローブ」を読んでください.これが本稿の基礎です.
1.コンピテンシーの検出とインスタンスの作成
ブラウザがFileReaderをサポートしているかどうかを検出するのは簡単です.このインタフェースをサポートするブラウザにはwindowオブジェクトの下にあるFileReaderコンストラクション関数があります.ブラウザにこのコンストラクション関数があれば、FileReaderのインスタンスをnewして使用できます.

        if ( typeof FileReader === 'undefined' ) {
	        alert( "          FileReader    " );
	} else {
                var reader = new FileReader();
	        // do sth.
	}

2.方法
FileReaderの例には4つの方法があり、そのうち3つはファイルを読み取るために使用され、もう1つは読み取りを中断するために使用される.次の表には、これらのメソッドとパラメータと機能がリストされています.読み取りに成功しても失敗しても、メソッドは読み取り結果を返さず、resultプロパティに格納されます.
メソッド名
パラメータ
説明
abort
none
わりこみよみとり
readAsBinaryString
file
ファイルをバイナリコードとして読み込む
readAsDataURL
file
データURLとしてファイルを読み込む
readAsText
file, [encoding]
ファイルをテキストとして読み込む
readAsText:この方法には2つのパラメータがあり、2番目のパラメータはテキストの符号化方式であり、デフォルト値はUTF-8である.この方法は非常に理解しやすく、ファイルをテキストで読み取り、読み取りの結果、このテキストファイルの内容になります.readAsBinaryString:この方法は「HTML 5のFileオブジェクトプローブ」で一度使用されました.ファイルはバイナリ文字列として読み込まれ、通常はバックエンドに転送され、バックエンドはこの文字列でファイルを格納できます.readAsData URL:これは例のプログラムで用いられる方法で、この方法はファイルをdata:で始まる文字列に読み取る.この文字列の実質はData URIであり、Data URIは小さなファイルを直接ドキュメントに埋め込むスキームである.ここでの小さなファイルとは、通常、画像やhtmlなどのフォーマットのファイルを指します.ここをクリックして、Data URIの詳細について説明します.
3.イベント
FileReaderには、ファイルを読み込むときの状態をキャプチャするための完全なイベントモデルが含まれています.次の表では、これらのイベントをまとめています.
≪イベント｜Events｜ldap≫
説明
onabort
割り込み時にトリガー
onerror
エラー時にトリガー
onload
ファイル読み込みが正常に完了するとトリガーされます
onloadend
読み込み完了トリガ(成功または失敗にかかわらず)
onloadstart
読み込み開始時にトリガー
onprogress
読み込み中
ファイルの読み込みが開始されると、成功または失敗にかかわらず、インスタンスのresultプロパティが埋め込まれます.読み取りに失敗するとresultの値はnullになり、そうでないと読み取りの結果となり、ほとんどのプログラムがファイルの読み取りに成功したときにこの値をキャプチャします.

	reader.onload = function () {
		this.result     //     
	}

4.インスタンス
これらの知識を理解した後、前の例を復元します.最初のステップでは、htmlセクションを作成します.主にinputと結果を表示するためのdivが含まれます.

        <label>         ：</label>
<input type="file" id="demo_input" />
<div id="demo_result">
          <!--            -->
    </div>

次にノードを取得し、ブラウザ互換性セクションを処理します.FileReaderインタフェースが実装されていないブラウザでは、inputを無効にするプロンプトが表示されます.そうしないと、inputのchangeイベントが傍受されます.

if ( typeof FileReader === 'undefined' ){
        result.innerHTML = "
<p class='warn'>  ，         FileReader

";
        input.setAttribute( 'disabled','disabled' );
} else {
        input.addEventListener( 'change',readFile,false );
}

最後に関数readFileのコードを書き、file inputのchangeイベントがトリガーされると、この関数を呼び出し、まずfileオブジェクトを取得し、fileのtype属性でファイルタイプを検証します.ここでは、画像タイプのファイルのみを選択できます.次にFileReaderインスタンスを作成し、readAsDataURLメソッドを呼び出してファイルを読み込み、インスタンスのloadイベントで正常に読み込まれたファイルの内容を取得し、imgノードを挿入するようにページに表示します.

function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
                alert("          ");
                return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
                result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        }
}

参考資料:
W3C File API --- FileReader Interface
MDC --- FileReader
Thanks: http://www.jsmix.com/blog/html5/file-reader.html