jQuery – JavaScript – 教你如何製作圖片上傳前的預覽圖

* 如果您想要用套件可以來這篇 (2017/03/07更新)

 

目標

  1. 讓使用者在上傳圖片前先顯示在頁面,用來確定是不是要上傳的圖片。
  2. 透過前端技術完成,不使用網路傳輸到伺服器做縮圖後回傳到前端。

解決方法

使用 Web APIs 的 FileReader (檔案讀取器) 來達到。關於 FileReader 的用法,可參考說明

線上測試

HTML

JavaScript/jQuery

解說

當 input.upl[type=file] 發生改變的時候會觸發我們自訂的 preview 方法。

我們看 preview 方法怎麼寫

其中要顯示的檔案大小,會須要做運算的轉換,我們額外包了一個 format_float 的方法

如果須要多圖預覽,請參考進階的 下一篇文章

這邊的範例比較簡單,只能做一張圖片的預覽。

參考