有時候當使用者選擇上傳圖片的時候  想出現預覽圖片的效果  但此時圖片還不想真的上傳
就需要用到JS的一個元件  FileReader   可以將input中選擇到的圖片先讀出來
把讀出來的資訊   放進指定的img標籤中

 

$("input[name=f1]").on('change', function(e){
       const file = this.files[0];

       const now_load = new FileReader();
       now_load.onload = function (e) {
         $('img').attr('src', e.target.result);
       };


       now_load.readAsDataURL(file);
     });

範例網址  http://i-rich.tw/border_blog/sample7/