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(''));

                //删除
                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实现多图片上传并限制上传的图片数量就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)