JavaScriptでのファイル出力と読み込みの方法【現役エンジニアが解説】
今回は、JavaScriptでのファイル出力と読み込みの方法について、それぞれの場合に分け、簡単に解説していきます。
ファイル出力
JavaScriptでファイルを出力するには、まずBlobオブジェクトを作ります。
次に、a要素を作り、そのBlobオブジェクトをダウンロードさせるという流れになります。
var blob = new Blob(['あいうえお'],{type:"text/plan"}); var filename = 'filename.txt'; if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, filename); } else { var link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; link.click(); }
上記のコードでは、”あいうえお”という文字列のBlobオブジェクトを作り、a要素でダウンロードさせています。
ファイル読み込み
JavaScriptでファイルを読み込むには、まずHTMLでtypeがfileのinput要素を置きます。
次に、JavaScriptでは、そのinput要素のchangeイベントで、FileReaderオブジェクトを使ってファイルを読み込みます。
document.getElementById('file').addEventListener('change', function() { var files = this.files; if (files.length === 0) { return; } var reader = new FileReader(); reader.onload = function(event) { console.log(event.target.result); }; reader.readAsText(files[0]); });
上記のコードでは、”file”というIDを持つinput要素でファイルが選択されると、そのファイルの中身をログに出力しています。
ファイルサイズ制限
JavaScriptでファイルを読み込む際は、ファイルサイズの上限を設けておくべきです。
読み込んだファイルのサイズはfiles[0].sizeで取得することができるため、バイト数の単位でチェックします。
document.getElementById('file').addEventListener('change', function() { var files = this.files; if (files.length === 0) { return; } var limit = 1024 * 1024; if (files[0].size > limit) { alert('サイズが1MBを超えています。'); this.value = ''; return; } });
上記のコードでは、”file”というIDを持つinput要素でファイルが選択されると、そのファイルが1MB(1024バイト*1024バイト)以上かどうかチェックしています。