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 をセットしておけば、
複数ファイルの中身をマージした結果とかも簡単に出せちゃいそうですね