jsにおけるFileReader()の使い方

HTML 5は、ファイルAPIの重要なメンバーとしてFileReaderを定義し、W 3 Cの定義に従ってFileReaderインタフェースは、ファイルの読み取り方法と、読み取り結果を含むイベントモデルを提供する.
FileReaderの使用方法は簡単です.FileReaderオブジェクトを作成して呼び出すには、次の手順に従います.
1.ブラウザによるFileReaderのサポートの検出

if(window.FileReader) {
    var fr = new FileReader();
    // add your code here
}
else {
    alert("Not supported by your browser!");
}

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

fr.onload = function() {
    this.result;
}

次に、FileReaderの使用を、アップロード画像のプレビューと進捗バー付きアップロードで示します.
`

<script type="text/javascript">
		function showPreview(source) {
			var file = source.files[0];
			if(window.FileReader) {
				var fr = new FileReader();
				fr.onloadend = function(e) {
					document.getElementById("portrait").src = e.target.result;
				};
				fr.readAsDataURL(file);
			}
		}
	</script>
 
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

`
アップロードファイルのタイプを限定する場合は、ファイルセレクタでファイルオブジェクトを取得しtypeプロパティでファイルタイプを確認できます.

if(!/image\/\w+/.test(file.type)){
    alert("          ");
    return false;
}

この検出は正規表現に基づいていることが容易に見出され,従って種々の複雑なマッチングが可能であり,非常に有用である.
プログレスバーを追加する場合は、HTML 5のprogressラベルを使用して、次のコードで実装できます.

<form>
    <fieldset>
        <legend>      ：</legend>
        <input type="file" id="File" />
        <input type="button" value="  " id="Abort" />
        <p>
            <label>    ：</label><progress id="Progress" value="0" max="100"></progress>
        </p>
        <p id="Status"></p>
    </fieldset>
</form>

var h = {
    init: function() {
        var me = this;
         
        document.getElementById('File').onchange = me.fileHandler;
        document.getElementById('Abort').onclick = me.abortHandler;
         
        me.status = document.getElementById('Status');
        me.progress = document.getElementById('Progress');
        me.percent = document.getElementById('Percent');
         
        me.loaded = 0;
        //    1M
        me.step = 1024 * 1024;
        me.times = 0;
    },
    fileHandler: function(e) {
        var me = h;
         
        var file = me.file = this.files[0];
         
        var reader = me.reader = new FileReader();
         
        //
        me.total = file.size;
         
        reader.onloadstart = me.onLoadStart;
        reader.onprogress = me.onProgress;
        reader.onabort = me.onAbort;
        reader.onerror = me.onerror;
        reader.onload = me.onLoad;
        reader.onloadend = me.onLoadEnd;
        //     
        me.readBlob(file, 0);
    },
    onLoadStart: function() {
        var me = h;
    },
    onProgress: function(e) {
        var me = h;
         
        me.loaded += e.loaded;
        //     
        me.progress.value = (me.loaded / me.total) * 100;
    },
    onAbort: function() {
        var me = h;
    },
    onError: function() {
        var me = h;
         
    },
    onLoad: function() {
        var me = h;
 
        if(me.loaded < me.total) {
            me.readBlob(me.loaded);
        } else {
            me.loaded = me.total;
        }
    },
    onLoadEnd: function() {
        var me = h;
         
    },
    readBlob: function(start) {
        var me = h;
         
        var blob,
            file = me.file;
         
        me.times += 1;
         
        if(file.webkitSlice) {
            blob = file.webkitSlice(start, start + me.step + 1);
        } else if(file.mozSlice) {
            blob = file.mozSlice(start, start + me.step + 1);
        }
         
        me.reader.readAsText(blob);
    },
    abortHandler: function() {
        var me = h;
         
        if(me.reader) {
            me.reader.abort();
        }
    }
};
 
h.init();