宜宾网站建设公司

使用layui怎么实现一个多图片上传功能

这篇文章给大家介绍使用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 = $(['' +
                ' 
' +                 '' +                 '
'].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怎么实现一个多图片上传功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


文章标题：使用layui怎么实现一个多图片上传功能
URL地址：http://hbruida.cn/article/ppshoi.html

其他资讯