Layui 上传文件限制数量
在网上看了好多相关的文章，各种不好使，反正就是限制不了。各种调用，都没办法较少代码的解决这个问题。下边分享我的办法。
功能图例：
多图上传----选中四张（程序限制上传三张）
程序上传三张后停止，上传第四张时提示 “图片数量达到上限”
以后再怎么传，都是报错，提示上传数量达到上限。
此时，删除其中两张图片，再重新选图时
此时，补齐了两张的数量，如果选多的，自动忽略掉，并提示数量超限
来吧，上源码，不含上传接口文件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>示例演示</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 注意：项目正式环境请勿引用该地址 --><link href="layui/css/layui.css" rel="stylesheet"><style>div.item {width: 100px;height: 100px;background-repeat: no-repeat;background-size: auto 100px;background-position: center center;}.intro{}</style></head><body><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"><legend>上传多张图片</legend></fieldset><div class="layui-upload"><button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">预览图：<div class="layui-upload-list" id="demo2"></div></blockquote></div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>拖拽上传</legend></fieldset> <div class="layui-upload-drag" id="test10"><i class="layui-icon"></i><p>点击上传，或将文件拖拽到此处</p><div class="layui-hide" id="uploadDemoView"><hr><img src="" alt="上传成功后渲染" style="max-width: 196px"></div></div><form name="form11" id="form11">图片数量：<input type="text" name="count" id="count" value=0 readonly></form><!-- 注意：项目正式环境请勿引用该地址 --><script src="layui/layui.js"></script><script>function getJsonLength(jsonData){var jsonLength = 0;for(var item in jsonData){jsonLength++;}return jsonLength;}layui.use(['upload', 'element', 'layer'], function(){var $ = layui.jquery,upload = layui.upload,element = layui.element,layer = layui.layer;//多图片上传upload.render({elem: '#test2',url: 'uploadsys/ajax_upload.asp' //此处配置你自己的上传接口即可,multiple: true//实现多个图片 多选的必要条件,accept: 'images',acceptMime: 'image/jpg,image/png,image/jpeg',exts: 'jpg|png|jpeg',auto: false//此处为关键点，必须设置成不自动上传，以便choose里进行数量判断,choose: function (obj) {obj.preview(function (index, file) {//在html代码中,form11.count，用于计数存图片数量if (form11.count.value>=3){//设置最多上传三张，超过三张的，忽略掉。layer.msg("图片数量达到上限", { icon: 2, offset: "auto", time: 3000 });return false;}else{console.log(form11.count.value);form11.count.value++;obj.upload(index, file) //上传文件操作}});},done: function(res){console.log(res)img = new Image()img.src=res.data.srcimg.onload=function(){//console.log(img.width)if ($("button.intro").length<=3){ //仅限10张图片$('#demo2').append('<div style="display:inline-block;margin:5px; text-align:center;"><div style="width: 150px; height: 100px; background-repeat: no-repeat; background:url('+res.data.src+');background-size:auto 100px; background-position:center center;"><input type=hidden name=picaddr value="'+res.data.src+'"></div><button class="intro">刪除</button></div>')}else{console.log("图片数量达到上限!")layer.msg("图片数量达到上限！", { icon: 2, offset: "auto", time: 3000 });return false;}$("button.intro").click(function(){$(this).parent().remove()form11.count.value=$("button.intro").length;//这是重点，判断“删除”按钮的个数，也就是图片的个数，赋值给form11.count，这个值是实际图片数量。//console.log($(this).parent())})}}});//拖拽上传upload.render({elem: '#test10',url: 'uploadsys/ajax_upload.asp' //此处配置你自己的上传接口即可,done: function(res){layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);console.log(res)}});});</script></body></html>
