今天小编就为大家分享一篇拉尤伊实现多图片上传并限制上传的图片数量，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
废话不多说了，直接上代码吧！
//给图片添加删除
函数mouseChange() {
$(文档)。on('mouseenter mouseleave '，').文件-项目，函数（事件){
if (event.type==='mouseenter') {
//鼠标悬浮
$(这个)。孩子('。信息')。淡入('快');
$(这个)。孩子('。句柄)。淡入('快');
} else if(事件。type===' mouseleave '){
//鼠标离开
$(这个)。孩子('。信息')。hide()；
$(这个)。孩子('。句柄)。hide()；
}
});
}
鼠标变化()；
//json的长度
函数getJsonLength(jsonData){
var jsonLength=0；
对于(JSON数据中的变量项){
jsonLength
}
返回jsonLength
}
//多图片上传
var ImgList=$('#uploader-list ')，uploadListIns=upload.render({
elem:"#选择img "，
url: $('#projectUrl ').val() '/img/imgUpload.do '，
接受："图像",
acceptMime: 'image/jpg，image/png，image/jpeg '，
exts: 'jpg|png|jpeg '，
尺寸：1024,
多重：真的，
自动：真的，
选择：函数（对象){
var files=obj。推送文件()；//将每次选择的文件追加到文件队列
var len=getJsonLength(files)；
//读取本地文件
对象预览(函数（索引，文件，结果){
if(parse int(len)parse int(coachpicsaray。长度)-计数6){
layer.msg('门店图片不能超过6张');
//遍历
$.每个（文件，函数(_key){
var key=_ key
var value=files[_ key]；
if(_key==index)
{ //删除
删除文件[_ key]；
}
});
}否则{
var reader=new FileReader()；
reader.onload=函数(e) {
var Image=new Image()；
image.onload=function () {
var realWidth=image.width
var realHeight=image.height
var tr=$([' div id=' upload-' index ' ' class=' file-iteme ' '
div class=' remove icon handle ' I class=' layui-icon ' style=' color:white；右边距：40%。/i/div '
img style=' color:white；'宽度：120 px ' '显示大(this)' src=' result ' id=' img-' index ' ' '
/div'].join(" ")；
//删除
tr.find(.句柄)。on('click '，function () {
$(这个)。父级()。移除();
删除文件[索引];//删除对应的文件
定义变量值=$('#clubCoachPics ').val().拆分(',');
var arr=[]；
for( var i in value){
如果(值[我]！=$(这个)。下一个()。数据('值'){
由…改编push(value[I])；
}
}
$('#clubCoachPics ').val(arr.join('，'))；
});
img列表。追加(tr)；
};
image.src=结果
};
//正式读取文件
reader.readAsDataURL(文件);
}
});
},
之前：函数（对象){
layer.msg('图片上传中.', {
图标：16,
色度：0.01,
时间：3000
})
},
完成：功能（检索、索引、上传){
$('#img-' index ' ').attr('数据值'，RES . imgurl)；
if(res.code==0){ //上传成功
var imgUrl=$('#clubCoachPics ').val()；
if(imgUrl==null||imgUrl==''){
$('#clubCoachPics ').val(RES . imgurl)；
}否则{
$('#clubCoachPics ').val(imgUrl '，' RES . imgUrl)；
}
删除文件[索引];//删除文件队列已经上传成功的文件
返回；
};
}
});
上面的layui实现了多图上传，并限制了上传图片的数量，这就是边肖分享的全部内容。希望能给你一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。