好用的jQuery多圖上傳即時預覽功能-教學撰寫:徐嘉裕Neil hsu

之前用過很多jQuery多圖上傳即時預覽程式，包括vmodel等，最大的問題就是會跟ck編輯器的js引入檔衝突，導致預覽圖無法顯示，很頭痛的，最近剛好有一個案子又遇到需要同時上傳多圖跟ck編輯器並存，所以只好放棄vmodel多圖預覽另外找其他的jQuery程式套件來用，上網估狗了一下找到這支jQuery多圖上傳程式還滿好用的，簡單又方便，樣式我也做了美化修改，分享給大家!!

//html結構部分

<input type="file" id="showimg" multiple/>

<div class='row'><div id='previewMultiple'></div>  </div>

//js部分，請吧程式放到模組引入的.js檔中或自行建立一支js檔，然後引入

//需要引入bootstrap框架

$(document).ready(function() {
$("#showimg").change(function(){
$("#previewMultiple").html(""); // 清除預覽
readURL(this);
});

function readURL(input){
if (input.files && input.files.length >= 0) {
for(var i = 0; i < input.files.length; i ++){
var reader = new FileReader();
reader.onload = function (e) {

var img = '<div class=col-md-6><div class=thumbnail><img src="' + e.target.result + '"></div></div>';
$("#previewMultiple").append(img);
}
reader.readAsDataURL(input.files[i]);
}
}else{
var noPictures = $("<p>目前沒有圖片</p>");
$("#previewMultiple").append(noPictures);
}
}

});

這樣就好了，來測試一下即時預覽功能是否正常

看起來沒問題，下面的ck編輯器也能正常運作，有需要的朋友參考看看!!

參考資料來源：https://progressbar.tw/posts/50

教學撰寫：徐嘉裕 Neil hsu