ローカルファイルを読み込む

ファイルを読み込むには、File APIのFileReaderを使用します。

---

0%

---

---

<input type="file" name="files[]" id="file" multiple onchange="readFile()">
<div id="progress">0%</div>
<div id="view"></div>
<script type="text/javascript">
function readFile() {
    var fs = document.getElementById("file").files;
    var v = document.getElementById("view");
    v.innerHTML = "";
    for ( var i = 0 ; i < fs.length ; i++ ) {
        var f = fs[i];
        var fr = new FileReader();
        var p = document.getElementById("progress");
        if (f.type == "image/jpeg" || f.type == "image/gif" || f.type == "image/png") {
            var img = document.createElement("img");
            fr.onload = function(event) {
                img.src = fr.result;
                v.appendChild(img);
            }
            fr.onerror = function() {
                v.innerHTML = "エラーが発生しました。";
            }
            fr.onprogress = function(event) {
                p.innerHTML = Math.floor(event.loaded / event.total) * 100 + "%";
            }
            fr.readAsDataURL(f);
        } else {
            fr.onload = function(event) {
                v.innerHTML = fr.result;
            }
            fr.onerror = function() {
                v.innerHTML = "エラーが発生しました。";
            }
            fr.onprogress = function(event) {
                p.innerHTML = Math.floor(event.loaded / event.total) * 100 + "%";
            }
            fr.readAsText(f, "utf-8");
        }
    }
}
</script>

---

上の例は、input要素でファイルを選択させ、選択後にファイルを読み込んでImageファイルの場合はimg要素を追加し、Image以外の場合はテキストとして読み込んで表示するようにしています。また読み込みの際、progressイベントを補足して進行度をパーセント表示させています。
FileReaderのメソッドは以下の物があります。

メソッド・プロパティ	内容
readAsBinaryString(ファイル)	バイナリとして読み込みます。
readAsText(ファイル, エンコーディング)	テキストファイルを指定エンコーディングで読み込みます。
readAsDataURL(ファイル)	ファイルをDataURL形式で読み込みます。
abort()	ファイル読み込みを中断します。
result	メソッドの実行結果を参照します。

イベント一覧は以下の物があります。

イベント	内容
loadstart	読み込みが開始された
load	読み込みが正常終了
loadend	読み込みが終了（成功 or 失敗）
abort	読み込みが中断された
error	読み込みエラーが発生
progress	読み込み中