上传图片并预览 限制个数

html：

<div class="img-up">
    <!--上传的图片-->
    <div class="imgbox">
        <!--<div class="imgContainer">-->
        <!--<img src="img/signin_bg.png" class="loadPics" alt="">-->
        <!--<img src="img/shanchu2.png" class="up-sc" alt="">-->
        <!--<div class="up-line">-->
        <!--<div class="success-line"></div>-->
        <!--</div>-->
        <!--</div>-->

    </div>
    <div class="upbox">
        <div class="upBtn">
            <span class="up-text">点击添加图片</span>
            <input type="file" class="upPic" accept="image/*" multiple="">
        </div>
        <div class="upLimit">(支持上传1~5张图片）</div>
    </div>
</div>

 

js：

// 上传图片
//图片上传预览功能
var userAgent = navigator.userAgent; //用于判断浏览器类型

$(".upPic").change(function() {
    // 获取当前已上传张数
    var hasNum = $('.imgContainer').length;
    console.log(hasNum);
    //获取选择图片的对象
    var docObj = $(this)[0];
    var picDiv = $(".imgbox");
    //得到所有的图片文件
    var fileList = docObj.files;
    var fileLength = fileList.length;
    console.log(fileLength - hasNum)
//var fileSize = fileList[0].size;//图片大小限制//if((fileSize/1024).toFixed(0)>2048){
    //$.msgBox.alert("图片大小不超过2M！")
//}else{

    if(fileLength > 5){
        $.msgBox.alert('最多可上传5张图片哦！');
    }else if(fileLength > (5 - hasNum)){//总张数不能超过5张
        $.msgBox.alert('最多还可上传'+(5 - hasNum)+'张图片哦！');
    }
    else {
        //循环遍历
        for (var i = 0; i < fileLength; i++) {
            //动态添加html元素
            var picHtml = ' <div class="imgContainer">\n' +
                '                            <img src="img/signin_bg.png" id="img'+fileList[i].name+'" class="loadPics" alt="">\n' +
                '                            <img src="img/shanchu2.png" class="up-sc" alt="">\n' +
                '                            <div class="up-line">\n' +
                '                                <div class="success-line"></div>\n' +
                '                            </div>\n' +
                '                        </div>'
            picDiv.prepend(picHtml);
            //获取图片imgi的对象
            var imgObjPreview = document.getElementById("img" + fileList[i].name);
            if (fileList && fileList[i]) {
                //图片属性
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
                if (userAgent.indexOf('MSIE') == -1) {
                    //IE以外浏览器
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                    console.log(imgObjPreview.src);
                    // var msgHtml = '<input type="file" id="fileInput" multiple/>';
                } else {
                    //IE浏览器
                    if (docObj.value.indexOf(",") != -1) {
                        var srcArr = docObj.value.split(",");
                        imgObjPreview.src = srcArr[i];
                    } else {
                        imgObjPreview.src = docObj.value;
                    }
                }
            }
        }
        $('.success-line').animate({'width':'100%'},function () {
            $(this).parent().css('display','none')
        })
    }


    /*删除功能*/
    $(".up-sc").click(function() {
        var _this = $(this);
        _this.parents(".imgContainer").remove();
    });
});