jQuery – JavaScript – 教你如何顯示上傳前的多筆預覽圖

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


前言可以快速帶過

上一篇 提到預覽圖的製作,使用了 Web APIs 的 FileReader 。後來經過網友的建議與提醒,以及我在實測後發現,一旦使用 FileReader 來讀取檔案,那麼系統資源上會比較吃重,因為瀏覽器會完整讀取你選擇的的每個檔案。所以如果一次選取數十個,瀏覽器就會停擺。網友建議如果只是製作預覽圖,可以改用 URL.createObjectURL() 這個方法。

目標

  1. 多檔預覽。如 Flickr 上傳圖片
  2. 結構化程式碼

解決方法

  1. 使用 vmodel.js 結構化
  2. 使用 URL.createObjectURL() 這個方法來完成

線上測試

 

HTML

CSS

jQuery/JavaScript

解說

一開始有一個參數,是用來後面做為不間斷的 <img><img><img> 存放。

接著我們透過 autoload() 可以告訴 vmodel 自動觸發要使用的方法,有 change_file() 這麼一個。

首先我們綁定使用者選取圖片的事件,點擊以後會呼叫 local_show(); 並把 input 傳入

當使用者有選取檔案後,才會觸發清空 local_clean() 、批次顯示 local_each_img()

清空,主要是把預覽的區域清空,避免不斷選取會不斷堆疊

因為這次的範例,使用者可以複選圖檔,所以我們使用 $.each 把每張圖片呼叫出來,並利用 URL.createObjectURL() 取得獨特的網址,讓該網址做為預覽圖的路徑。

其中使用了 local_create_imgcode() 主要是建立圖片編碼,但不直接透過 jQuery 的 append() 或 prepend() 寫入 HTML。這是因為多次插入 DOM 會影響校能,例如有50張圖片那瀏覽器資源不足可能會停擺,所以我們要做的是,在最後一次性的插入DOM。

最後 vs.imgcode 會成為一個不間段的標籤字串,我們才在最後加入 DOM,這樣效能才會好。最後我們還原選取鈕供下一次使用。

透過上面 vmodel 結構化 jQuery 與這次的範例目標,整個物件的感覺就更加強烈,維護上也方便許多。關於 vmodel.js 的寫法與文件,可以參考我的 github 或網站 內部相關文章

那麼如果不使用 vmodel 那要如何組織你的 jQuery 呢?我這邊就以 jQuery 建議與修改,做為組織程式碼的方法做為範例。

當然相較之下,會是使用 vmodel 的可塑性高出許多囉!

 

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

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

 

目標

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

解決方法

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

線上測試

HTML

JavaScript/jQuery

解說

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

我們看 preview 方法怎麼寫

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

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

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

參考