jQuery – 使用套件 file-preview.js 簡單顯示預覽圖
之前教過 2 種預覽圖都是原理，從發佈以來有很高的流量都在看這兩篇：
但覺得看這些文字連我都覺得有點囉嗦XD 剛好最近突然寫了幾個類似功能，於是順手做了一個 jQuery 套件，大家直接下載來放到自己的專案吧。
以後大概連我自己都不會再點進去上面兩篇了吧 XDD
HTML 大概長這樣
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form class="form1"> <input type="file" name="upload[]" class="upload" multiple> <div> <div class="img"></div> <div class="img"></div> <div class="img"></div> ...... <!-- 可以自己用模板或是 loop 動態/靜態產生，隨便~都好 --> </div> </form> |
這邊是用 <div> 取代 <img> 這樣圖片才能適應不同寬高，不至於變形。不懂得可以網路 Google 一下囉。
最快的方法就這麼寫
|
1 2 3 4 5 6 7 8 9 |
$().filePreview({ parent: ".form1", selector: ".upload", success: function (key, obj){ console.log(obj) } }) |
記得選擇器 $() 中間為空喔。但如果你需要在 on() 事件中更自訂化一點，我建議這麼寫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(".form1").on('change', '.upload', function() { var _this = this; $.filePreview.create(this, { // 選擇啟用效能會慢一點，但可以把檔案編碼為 base64, AJAX 到遠端很方便 isReader: true, // 啟用 isReader 可以看到每個開啟的進度 progress: function (key, percent){ //... }, // 每個檔案讀取成功後觸發 success: function (key, obj){ //這個範例是顯示圖片 var $img = $(_this).parents(".form1").find(".img").eq(key); $img.css({ 'background-image' : 'url(' + obj.preview + ')' }); // 另外也可以看到 obj.base64 囉，這裡就自己試試看吧 } }); }); |
上面用 $(_this) 主要是因為一個頁面可能會有 1 個以上的 form 喔！如果直接 $(“.img”) 去尋找會彼此表單互相影響啦，所以養成以組件的根源為節點的好習慣 😀
上面的程式碼就是變成下面的結果 😀
從 success 中就可以取得預覽圖的網址、檔名、類型、大小……若有需要還可以取得 base64 的圖片編碼，可以直接使用 POST 送到遠端解碼 😀
Comments