2020/09/16

JavaScriptでのファイル出力と読み込みの方法【現役エンジニアが解説】

PROGRAM

今回は、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バイト)以上かどうかチェックしています。

• facebook
• Tweet
• Read Later