投稿時にファイルから選択した画像を表示する方法メモ（HTMLファイル上でJS）

Railsで画像投稿時にファイルから選択した画像をその場で確認できる方法。

htmlファイル

%img{id:“image-file”}
      :javascript
        document.addEventListener(‘change’, function(e){
          let file = e.target.files[0];
          let fileReader = new FileReader();
          fileReader.onload = function() {
            let dataUri = this.result;
            let img = document.getElementById(‘image-file’);
            img.src = dataUri;
          }
          fileReader.readAsDataURL(file);
        });

・addEventListener さまざまなイベント処理を実行することができるメソッド

・document Chrome等のブラウザ上で表示されたドキュメントを操作する事

・change changeイベントを発生

・target.files ファイルの取得する

・FileReader ユーザーのコンピューター内にあるファイル (もしくはバッファ上の生データ) をウェブアプリケーションから非同期的に読み込むことが出来る。

・result　ファイルの内容を返す

・getElementById 指定された idの属性を持つ、要素の参照を返します

・readAsDataURL ファイルオブジェクトをData URIに変換するメソッド