前言

我最近在做自己個人部落格的時候，遇到一個前端的問題，就是如何實時預覽 input 標籤上傳的圖片。一般的 <input type="file’ /> 標籤是不能實現實時預覽的。

解決方案

可以通過 file 標籤和 js 的 FileReader 介面來實現。

• 把選擇的圖片檔案呼叫 readAsDataURL 方法
• 把圖片資料轉成 base64 字串形式顯示在頁面上

html 程式碼：

 <div class="am-form-group am-form-file">
      <div class
 
="tpl-form-file-img">
           <img id="backimg" src="/static/admin/assets/img/code.png" class="am-img-responsive" alt="">
      </div>
      <input id="doc-form-file" type="file" multiple="" onchange="reads(this)">
</div>

javascript 程式碼：

  function reads(obj) {
     var file =
 
 obj.files[0];
     var reader = new  FileReader();
     reader.readAsDataURL(file);
     reader.onload = function (ev) {
         $("#backimg").attr("src", ev.target.result);
     }
  }

效果圖