Layui 上传图片限制数量超出数量中断上传带预览图带删除按钮

Cheng_ASP

已于 2023-03-15 10:03:03 修改

阅读量1.4k

点赞数

文章标签： layui javascript 前端

于 2023-03-14 17:02:07 首次发布

本文链接：https://blog.csdn.net/u011289462/article/details/129531542

版权

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.src

      img.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>