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


Posted in Javascript onSeptember 26, 2019

废话不多说了,直接上代码吧!

//给图片添加删除
    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(''));
 
                //删除
                tr.find('.handle').on('click', function () {
                  $(this).parent().remove();
                  delete files[index]; //删除对应的文件
                  var value = $("#clubCoachPics").val().split(",");
                  var arr = [];
                  for( var i in value){
                    if (value[i] != $(this).next().data('value')){
                      arr.push(value[i]);
                    }
                  }
                  $("#clubCoachPics").val(arr.join(",")) ;
 
                });
                ImgList.append(tr);
 
              };
              image.src = result;
            };
            //正式读取文件
            reader.readAsDataURL(file);
          }
        });
      },
      before: function (obj) {
        layer.msg('图片上传中...', {
          icon: 16,
          shade: 0.01,
          time: 3000
        })
      },
      done: function (res, index, upload) {
        $("#img-"+ index + "").attr("data-value",res.imgUrl);
        if(res.code == 0){ //上传成功
          var imgUrl = $("#clubCoachPics").val();
          if(imgUrl==null||imgUrl==""){
            $("#clubCoachPics").val(res.imgUrl);
          }else{
            $("#clubCoachPics").val(imgUrl+","+res.imgUrl);
          }
          delete files[index]; //删除文件队列已经上传成功的文件
          return;
        };
 
      }
    });

以上这篇layui实现多图片上传并限制上传的图片数量就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
JS实现简易计算器
Feb 14 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
layui 上传图片 返回图片地址的方法
Sep 26 #Javascript
vue仿ios列表左划删除
Sep 26 #Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 #Javascript
vue实现百度搜索功能
Dec 28 #Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 #Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
js自定义回调函数
2015/12/13 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
简单讲解Python中的闭包
2015/08/11 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python函数的作用域及关键字详解
2019/08/20 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
杭州时比特电子有限公司SQL
2013/08/22 面试题
校长就职演讲稿
2014/01/06 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
致青春观后感
2015/06/09 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang
MongoDB使用场景总结
2022/02/24 MongoDB