html5 の File API を使って、ローカルのテキストファイルを読み込んでみる

とっても簡単です(Firefox 3.6 で動作を確認)。

html

fileのアップロードフォームにonchangeを仕込んでおきます。

あとは、読み込んだファイルの内容を表示するtextareaを用意。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<input type="file" onchange="read(this)" />

<hr />
<textarea id="text" cols="80" rows="20" wrap="off"></textarea>

</body>
</html>

javascript

function read (ele) {
    if (!ele.files.length) return;

    var file = ele.files[0];
    if (!/^text\//.test(file.type)) return;  // text/plain, text/html, ...

    var fr = new FileReader();
    fr.onload = function () {
        document.getElementById('text').value = fr.result;  // 読み込み結果をtextareaに
    };
    fr.readAsText(file);  // ファイルをテキストとして読み込む
}

readAsTextの2つ目の引数で文字コードを指定できます*1が、
指定しなくても上手いこと推定してくれるっぽいです。
UTF-8, SJIS, EUC は普通に読み込めました。)


file フォームに multiple をセットしておけば、
複数ファイルの中身をマージした結果とかも簡単に出せちゃいそうですね

*1:fr.readAsText(file, "UTF-8"); とかで