今天小编就为大家分享一篇拉尤伊实现多图片上传并限制上传的图片数量,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
废话不多说了,直接上代码吧!
//给图片添加删除
函数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文件=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实现了多图上传,并限制了上传图片的数量,这就是边肖分享的全部内容。希望能给你一个参考,多多支持我们。