先週、ちょっとした飲み会があったのですが、その際に、少しJavaScriptの話になり、「JavaScriptがバージョンアップして今はファイルにアクセスできるんですよねー」と言ったら、「それはできない」と言われてしまったので、実際にできることをプログラムで証明したいなと。
動作できる環境は、今のところ、FireFox 3.6だけなのですが、以下のようなプログラムを作りました。
<!DOCTYPE html>
<html>
<head>
<title>FileAPIテスト</title>
</head>
<body>
<script type="text/javascript">
function $(aID){
return document.getElementById(aID);
}
function lf_Check(){
var inputfile = $("inputfiles").files;
inputfile = inputfile[0];
var reader = new FileReader();
reader.onloadend = function(e) {
$("Result").innerHTML = reader.result;
};
reader.readAsText(inputfile,"UTF-8");
}
</script>
<input id="inputfiles" type="file" />
<input type="button" value="Check" onclick="lf_Check();" />
<div>
<textarea id="Result" cols="50" rows="30"></textarea>
</div>
</body>
</html> |
動かしてみたところ、正常に動作しました。
UTF-8のテキストファイルなら、上のプログラムでファイルの中身を表示することができると思います。
(他にも、動作確認は行っていないですが、Shift-JIS、EUC-JPなどにも対応しているようです。)
実際に動くものを下に用意しました。
FireFoxでしか動きませんが、是非、お試しあれ。
参考URL
File APIをFirefox 3.6で試してみるHTML5サンプル集
0 コメント:
コメントを投稿