layui实现多图片上传并限制上传的图片数量_layui上传多张图片,layui图片上传限制5张资源-CSDN文库

63 浏览量 2020-12-13 17:31:53 上传评论收藏 34KB PDF 举报

资源推荐

资源详情

资源评论

layui实现多图片上传并限制上传的图片数量实现多图片上传并限制上传的图片数量

废话不多说了，直接上代码吧！废话不多说了，直接上代码吧！

//给图片添加删除

function mouseChange() {

$(document).on("mouseenter mouseleave", ".file-iteme", function (event) {

if (event.type === "mouseenter") {

//鼠标悬浮

$(this).children(".info").fadeIn("fast");

$(this).children(".handle").fadeIn("fast");

} else if (event.type === "mouseleave") {

//鼠标离开

$(this).children(".info").hide();

$(this).children(".handle").hide();

}

});

}

mouseChange();

//json的length

function getJsonLength(jsonData){

var jsonLength = 0;

for(var item in jsonData){

jsonLength++;

}

return jsonLength;

}

//多图片上传

var ImgList = $('#uploader-list'),uploadListIns =upload.render({

elem: '#chooseImg',

url: $("#projectUrl").val()+ '/img/imgUpload.do',

accept: 'images',

acceptMime: 'image/jpg,image/png,image/jpeg',

exts: 'jpg|png|jpeg',

size: 1024,

multiple: true,

auto: true,

choose: function(obj){

var files = obj.pushFile(); //将每次选择的文件追加到文件队列

var len = getJsonLength(files);

//读取本地文件

obj.preview(function (index, file, result) {

if (parseInt(len)+parseInt(coachPicsArray.length)-count > 6){

layer.msg("门店图片不能超过6张");

//遍历

$.each(files,function(_key){

var key = _key;

var value = files[_key];

if(_key == index)

{ //删除

delete files[_key];

}

});

}else {

var reader = new FileReader();

reader.onload = function (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="removeIcon handle"> <i class="layui-icon" style="color: white ;margin-right: 40%"></i></div>' +

'<img style="color: white;width: 120px" "showBig(this)" src=' + result + ' id="img-' + index + '">' +

'</div>'].join(''));

//删除

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38629362

粉丝: 6
资源: 967

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip