使用layui怎么实现一个多图片上传功能-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

使用layui怎么实现一个多图片上传功能-创新互联

这篇文章给大家介绍使用layui怎么实现一个多图片上传功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

10年积累的做网站、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有蓬莱免费网站建设让你可以放心的选择与我们合作。

//给图片添加删除
    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怎么实现一个多图片上传功能-创新互联
分享地址：http://lswzjz.com/article/dgcihg.html

新闻中心

其他资讯