[JavaScript] FileReader API 實作圖片預覽

本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

前端實作表單如果有碰到需要上傳圖片幾乎都會有這需求：預覽。

作法有跟後端搭配，同步 AJAX 上傳後回傳連結套入預覽，或是今天這主題純前端搞定！

使用 JavaScript FileReader API 要注意瀏覽器支援度，尤其是 IE.. ，不過整體來說支援度都還不錯。

HTML 結構：

JavaScript 程式：

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

解讀起來也不難，從輸入的 file 類別捕捉「改變」事件然後實作這 onchange 事件。程式中先是建立一個 FileReader 物件後，再監聽待會檔案的「讀取」事件，都準備好後就使用 FileReader 物件進行讀取，讀取的時候因為使用 readAsDataURL 方法，所以會輸出用 base64 編碼過的字串圖片資料，直接帶入 img 標籤中顯示。

短短幾行就能實作純前端版本的預覽功能，速度也是比較快，省的資料還要先傳輸到後端處理過再回傳的溝通問題，如果瀏覽器不支援可以選擇乾脆不預覽或是與後端打組合技了～