File APIを使ってファイルデータのbase64変換

HTML5のFile APIを勉強しているときにbase64というものを知りました(wikipedia:Base64)。というわけで、今回は勉強したFile APIを使って作った簡単なプログラムの掲載。なお、IE9には対応していないようです。

<form>
	<input type="file" onchange="fileget(this);">

	<textarea id="base64area">base64データ</textarea>
</form>
<script type="text/javascript">
	function fileget(imgfile) {
		if(!imgfile.files.length) return;
		var file=imgfile.files[0];
		var fr=new FileReader();
		fr.onload=function(evt) {
			document.getElementById("base64area").innerHTML=evt.target.result;
			document.getElementById("datauri").href=evt.target.result;
		}
		fr.readAsDataURL(file);
	}
</script>

画像などのファイルを選択すると、base64のdataスキームURIがテキストエリア内に表示されるはずです。画像やHTMLファイルの場合、コピーしてブラウザのアドレスバーに貼り付けると、ブラウザにちゃんと表示されると思います。
　特に、画像を扱う場合に、どこかのサーバーにアップロードせずに画像を表示することができるため、重宝される使い方です。ただし、サイズ自体は元のファイルより大きくなります。