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表单提交

 
posted @ 2018-05-24 17:58  他的她  阅读(151)  评论(0编辑  收藏  举报