jQuery多图上传

HTML代码部分

<label class="col-sm-3 control-label">图片:</label>
<div class="col-sm-9">
  <input type="file" name="file" class="form-control"  multiple accept="image/*" onchange="onchageUp(this)" required>
</div>
<div class="" style="margin-left:175px;margin-top:45px;">
  <div class="box" style="display: flex;justify-content: space-between;">
</
div> </div>

js代码部分

 
 
var len = 0;
        function onchageUp(ev) {
            var url = ev.files;
            len += ev.files.length;
            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>");
                });
            }
        }
 
 

后台用form表单提交

 

猜你喜欢

转载自www.cnblogs.com/notesbooks/p/9084253.html