js jquery lightbox 实现多上传图片预览

<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="equipment_model">上传图片</label>
<div class="col-sm-9" id="pic">
<input class="form-control" name="attachment" id="attachment" type="file" multiple="multiple" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" style="width: 41.5%"/>
</div>
<div id="picc" class="col-sm-9" style="margin-left: 10%"></div>
<!-- <a id="lbox" href="" rel="lightbox"> <img id="preview" width="20%" height="10%" style="margin-left: 25%;margin-top: 10px"></a> -->
</div>

 

document.getElementById('attachment').onchange = function(evt) {
$("#picc").empty();
// 如果浏览器不支持FileReader，则不处理
if (!window.FileReader) return;
var files = evt.target.files;
if(files.length>3){
zeroModal.alert('文件不能超过三个!');
var obj = document.getElementById('attachment') ;
obj.outerHTML=obj.outerHTML;
$("#picc").empty();
return;
}else{
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
$("#picc").append("<a href='"+e.target.result+"' rel='lightbox' data-lightbox='roadtrip'><br><img src='"+e.target.result+"' width='20%' height='10%' style='margin-left: 25%;margin-top: 10px'></a><br>")
};
})(f);
reader.readAsDataURL(f);
}
}
}

转载于:https://www.cnblogs.com/jshmscjjx/p/7159602.html