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

结果展示:

 

 

 

 

 

posted on 2019-09-12 15:45  碎片时间  阅读(1534)  评论(1编辑  收藏  举报

导航