File APIでディスクトップ上のテキストファイルを読み込む

File APIを使ってディスクトップ上のテキストファイルを読み込む

まず、ファイルを読み込むためにはFileReaderインタフェースオブジェクトを取得する。

var fr = new FileReader();

ファイルからのデータ読み取りは次のFileReaderインタフェースのメソッドとプロパティを使う。

プロパティ／メソッド 意味
readfAsDataURL(blob) ファイルのデータをDataURL形式で取り出す。Blobインタフェースオブジェクトを第1引数に指定する。
readAsText(blob,encoding) ファイルのデータをテキスト形式で取り出す。Blobインタフェースオブジェクトを第1引数に指定する。オプションで文字エンコーディングを第2引数に指定できる。
readAsArryBuffer ファイルのデータをバイナリ形式で取り出す。Blobインタフェースオブジェクトを第1引数に指定する
abort()メソッド ファイルのデータのロードを中止する
resultプロパティ readAsDataURL()、readAsText()、readAsArrayBuffer()が呼び出されると、このプロパティから所定のフォーマットでデータを取り出すことができる

ファイル取得時のイベント

FileReaderインタフェースには次のイベントハンドラが定義されている。

イベントハンドラ イベント名 イベントの発生タイミング
onloadstart loadstart ファイルのロードが開始されたとき
onprogress progress ファイルのロード中に連続して発生する
onabort abort ファイルのロードが中止されたとき
onerror error ファイルのロードに失敗したとき
onload load ファイルのロードが成功して終了したとき
onloadend loadend ファイルのロードのリクエスト処理が終了したとき。ただし、成功したときだけでなく、失敗したときも発生する

HTML

<p>文字を入力してから「保存」をクリックする</p>
<form>
  <textarea id="txt1" rows="5" cols="40"></textarea>
  <br><br>
  <input type="button" value="保存" id="exec">
</form>
<div id="link"></div>
<br>
<p><input type="file" id="fin"></p>
<dl class="file_att">
 <dt>ファイル名</dt>
 <dd id="name">-</dd>
 <dt>サイズ</dt>
 <dd id="size">-</dd>
 <dt>タイプ</dt>
 <dd id="type">-</dd>
 <dt>最終更新日時</dt>
 <dd id="mdate">-</dd>
</dl>

JavaScriot

function fsave(){
  var txt = document.querySelector('textarea#txt1').value;
  txt = txt.replace(/\n/g, "\r\n");  // LF => CR LF
  var bb = new Blob([txt]);

  var url;
  if(window.navigator.msSaveBlob){
    // IEの場合
    window.navigator.msSaveOrOpenBlob(bb, 'savefile.txt'); 
  } else {
    // IE以外
    url = window.URL.createObjectURL(bb);
    document.querySelector('div#link').innerHTML = '<a href="' + url + '" target="_blank">' + url + '</a><br/>';
  }
}

function init(){
	$('#fin').change(function(){
		// 選択されたファイルを表すFileオブジェクト
		var file = this.files[0];
		if( !file ) {
			return;
		}
		// ファイルの各種情報を表示
		document.querySelector('#name').textContent = file.name;
		document.querySelector('#size').textContent = file.size;
		document.querySelector('#type').textContent = file.type;
		document.querySelector('#mdate').textContent = file.lastModifiedDate;

		if (file.type.match('text.*')) {
      // file.typeが画像の場合にファイルを読み込む
			var fr = new FileReader();    // FileReaderオブジェクト
			fr.onload = function() {
				$('#txt1').text(fr.result);
			}
			fr.readAsText(file,"UTF-8");  // ファイルの読み込み
		}
	});
}

window.addEventListener("DOMContentLoaded", function(){
  document.querySelector('form #exec').addEventListener('click',fsave,false);
  init();
},false);

文字を入力してから「保存」をクリックする


ファイル名
–
サイズ
–
タイプ
–
最終更新日時
–