jquery實現多圖上傳展示

圖片上傳后展示在前端，最多只能選擇5張圖片

<div>
    <div class="imgBg" id="upfile1-preview"><img src="/imgs/add_img.png"/></div>
    <div class="inputs">
        <input type="file" id="upfile1" multiple="multiple"/>
        <input type="button" class="upfileBtn" id="upfileBtn1" value="上傳"/>
    </div>
</div//輸入圖片信息

var insertImg = function(imgDom){ var formData = new FormData(); var fileImgs = $(imgDom)[0].files; if(fileImgs.length>5){ MsgBox('提示','最多只能選擇5張圖片哦'); setTimeout(fadeOut,500); return; }; for(var i=0; i<fileImgs.length; i++){ formData.append('file',fileImgs[i]); } $.ajax({ url: '/insertAltpAndWd', type: 'POST', cache: false, //上傳文件不需要緩存
 data: formData, processData: false, // 告訴jQuery不要去處理發送的數據
        contentType: false, // 告訴jQuery不要去設置Content-Type請求頭
        success: function (data) { // console.log(data);
            if(data=='插入成功'){ imgPreview(imgDom); MsgBox('提示','插入成功'); setTimeout(fadeOut,500); } } }) } function imgPreview(imgDom) { $(imgDom+'-preview').empty(); //獲取文件
    var files = $(imgDom)[0].files;
 console.log(files); $.each(files,function(index,val){ //判斷是否支持FileReader
        if(window.FileReader) { var reader = new FileReader(); } else { alert("您的設備不支持圖片預覽功能，如需該功能請升級您的設備！"); } reader.readAsDataURL(val); reader.onload = function(e){ console.log(e); var imgs = '<img src="'+e.target.result+'"/>'; $(imgDom+'-preview').append(imgs); } }) }

結果展示：