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); } }) }

结果展示：