多图上传加验证加修改file样式

选择图片

<div class="file-box">
    <input type="file" name="img[]" class="form-control file-btn" id="img" multiple onchange="onchageUp(this)">选择图片
</div>
<div>
    <div class="box" style="display: flex;justify-content: space-between;"></div>
</div>

var len = 0;
    function onchageUp(ev){
    var patter = /(\.*.jpg$)|(\.*.png$)|(\.*.gif$)|(\.*.bmp$)/;
        var url = ev.files;
        len += ev.files.length;
        if(!patter.test($(ev).val())){
            alert('系统不支持图片的格式');
        }else if(len>5){
            alert('上传数量超过限制');
            ev.outerHTML = ev.outerHTML//重新加载
        }else {
            $.each(url, function(i){
                var path = window.URL.createObjectURL(url[i]);
                $('.box').append("<div><img src='"+ path +"'></div>");
            });
        }
    }

 改变file样式

.file-box{
        display: inline-block;
        position: relative;
        padding: 3px 5px;
        overflow: hidden;
        color:#fff;
        background-color: #ccc;
    }
    .file-btn{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        outline: none;
        background-color: transparent;
        filter:alpha(opacity=0);
        -moz-opacity:0;
        -khtml-opacity: 0;
        opacity: 0;
    }