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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
python删除过期log文件操作实例解析
2018/01/31 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
法律专业实习鉴定
2013/12/22 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
初中班主任寄语
2014/04/04 职场文书
志愿者活动总结
2014/04/28 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
品牌推广策划方案
2014/05/28 职场文书
电子专业求职信
2014/06/19 职场文书
服务行业演讲稿
2014/09/02 职场文书
Vue深入理解插槽slot的使用
2022/08/05 Vue.js