[JavaScript] FileReader API 實作圖片預覽

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

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

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

FileReader API 瀏覽器支援度

HTML 結構:

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

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 標籤中顯示。

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

Facebook 外掛整合


Share: