FileAPIの練習

FileAPIの練習１

改訂第5版 JavaScript ポケットリファレンス （古籏一浩著）を元に練習。

FileAPIの概要

テキストファイルやバイナリファイルを読み込みます。

IE 10（一部機能のみ）、Firefox 3.6、Safari 5（一部機能のみ）、Google Chrome 11以降で対応しています。

ファイル情報の取得

参照ボタンを押して、ローカルファイルを１つ選択してください。続けて表示ボタンを押すとテーブルにファイル情報が表示されます。

日付表示を追加（File API 仕様　日本語訳より）。iPhoneのSafariでは日付が正しく表示されません。

ファイル選択

ファイル選択
	<input type="file" id="targetFiles" size="50">
	<input type="button" value="ファイル情報を表示" onClick="getFileInfo()">

<script type="text/javascript">
function getFileInfo() {
	var myFile = document.getElementById("targetFiles").files[0];
	document.getElementById("file_info1").innerHTML = myFile.name; //ファイル名
	document.getElementById("file_info2").innerHTML = myFile.size + " bytes"; //ファイルサイズ
	document.getElementById("file_info3").innerHTML = myFile.type; //MIME Type
	document.getElementById("file_info4").innerHTML = myFile.lastModified.toLocaleDateString(); //日付
	document.getElementById("file_info5").innerHTML = myFile.urn; //URN
}
</script>

テキストファイルの読み込み

参照ボタンを押してローカルドライブからテキストファイルを選びます。読込ボタンはファイルのエンコードに合わせてUTF-8かシフトJISか選択してください。エンコードが正しくない場合は文字化けします。

ファイル選択

（ファイル内容を表示）

ファイル選択 
	<input type="file" id="targetTextFiles" size="50">
	<input type="button" value="読込(UTF-8)" onClick="getTextFile('utf-8')">
	<input type="button" value="読込(シフトJIS)" onClick="getTextFile('shift_jis')">
	<span id="view_text"></span>

<script type="text/javascript">
function getTextFile(encd) {
	var myFile = document.getElementById("targetTextFiles").files[0];
	if (myFile.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(evt){
			var txt = evt.target.result; //ファイル内容を読み出し
			txt = txt.replace(/</g, "&lt;"); //置き換え
			txt = txt.replace(/>/g, "&gt;"); //置き換え
			txt = "<p>MIME : " + myFile.type + "</p><pre>" + txt + "</pre>";
			document.getElementById("view_text").innerHTML = txt;
		}
		reader.readAsText(myFile, encd);
	}
}
</script>

バイナリファイルの読み込み

参照ボタンを押してローカルドライブからファイルを選びます。読込ボタンを押すとバイナリファイルをテキスト化して表示します。

ファイル選択

（ファイル内容を表示）

ファイル選択 
	<input type="file" id="targetBinFiles" size="50">
	<input type="button" value="読込" onClick="getBinFile()">
	<span id="view_bin"></span>

<script type="text/javascript">
function getBinFile() {
	var myFile = document.getElementById("targetBinFiles").files[0];
	var reader = new FileReader();
	reader.onload = function(evt){
		var allData = evt.target.result; //ファイル内容を全て取得
		var bin = "";
		for (var i=0; i<allData.length; i++) {
			var s = allData.charCodeAt(i).toString(16); //16進数で表示
			if (s.length == 1) s = "0" + s; //桁数を二桁に揃える
			if (i % 16 == 15) {
				bin += s + "<br>"; //16個目で改行
			} else {
				bin += s + " ";
			}
		}
		bin = "<p>MIME : " + myFile.type + "</p><pre>" + bin + "</pre>";
		document.getElementById("view_bin").innerHTML = bin;
	}
	reader.readAsBinaryString(myFile);
}
</script>

FileAPIの練習２

山田祥寛さんの記事より

画像を読み込んで表示する

バイナリファイルの読み込みスクリプトに必要な部分を入れ換えています。

ファイル選択

ファイル選択 
	<input type="file" id="targetImgFiles" size="50">
	<input type="button" value="表示" onClick="getImgFile()">
	<img src="LNtitle.gif" id="view_image">

<script type="text/javascript">
function getImgFile() {
	var myFile = document.getElementById("targetImgFiles").files[0];
	if (myFile.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(evt){
			document.querySelector("#view_image").src = reader.result;
		}
		reader.readAsDataURL(myFile);
	}
}
</script>

エラーコードの組み込み

上記の画像の読み込みにエラーイベントをイベントリスナーで組み込みます。（既に組み込み済み）

		// 読み込みエラー時の処理
		reader.addEventListener('error', function(e) {
			// エラーコードに対応するメッセージを準備
			var errors = ['','指定のファイルが見つかりません。','読み込み権限がありません。','処理が中断されました。','読み込み中にエラーが発生しました。','ファイルサイズが大きすぎます。']
			// エラーコードに応じてメッセージを表示
			alert(errors[reader.error.code]);
		}, true);

ファイルダウンロード

参考：http://lostlinksearch.net/blog/2012/11/javascriptで任意のテキストを任意のファイル名でダウン/

戻る