1.以change事件來觸發
2.一開始將上傳的檔案轉換為base64字串，Base64是一種基於64個可列印字元來表示二進位資料的表示方法。(參考)
2.建立FileReader物件，FileReader接口提供讀取文件的方法和包含讀取结果的事件模型
3.在使用onload(頁面與圖片加載完成的時候)以e.target.result的結果放入圖片讀取
4.readAsDataURL方法會讀取指定的Blob 或 File 对象。讀取操作完成的时候，這裡為轉換成Base64

html

<input type='file' />
<div class="container">
  <img />
</div>

jquery

$('input').on('change', function(e){      
  const file = this.files[0];//將上傳檔案轉換為base64字串
      
  const fr = new FileReader();//建立FileReader物件
  fr.onload = function (e) {
    $('img').attr('src', e.target.result);//读取的结果放入圖片
  };
      
  // 使用 readAsDataURL 將圖片轉成 Base64
  fr.readAsDataURL(file);
});

參考：
https://exfast.me/2019/04/javascript-preview-image-when-front-end-uploads-image/
codepen