layui多图上传

HTML代码

<div class="layui-form-item layui-col-md6 layui-col-md-offset3">
  <label class="layui-form-label">图库图片:</label>
  <button type="button" id="uploadTop" class="layui-btn layui-btn-primary">
    <i class="layui-icon"></i>上传
  </button>
  <div style="display: inline-block;top:50%;left: 120px;">只能上传jpg/png格式文件，文件不能超过1MB，请上传16：9图</div>
  <div class="layui-upload-list uploader-list" style="" id="topImage"></div>
  <input type="hidden" id="stockImages" name="stockImages"/>
</div>

JS代码

/**
* 添加顶部图片的框框
*/
$("#uploadTop").on('click',function(){
  if(topIds>19){
    layer.msg("最多上传20张图", {
      icon: 5
    });
  }else{
    $('#topImage').append('<div style="display: inline-block;margin-left: 10px;"><div id="topValue" style="margin:0 auto;width: 100px;height: 100px;border:1px solid #c0b5a8;"><img id="top'+topIds+'" height="100px" width="100px" class="layui-upload-img">' + '<input type="hidden" name="imgPath" id="topInput'+topIds+'" value=""/></div><i id="uploadTop'+topIds+'" class="layui-icon" style="margin: 0 0">上传</i><i class="topImage close layui-icon" style="margin: 0 20px"></i></div>');
    $(".topImage").on('click',function(){
      $(this).parent().remove();
    });


    var uploadId = "#uploadTop"+topIds;
    var imgId = "top"+topIds;
    var inputId = "#topInput"+topIds;
    setImg(uploadId,imgId,inputId);topIds++;
  }
});
/**
* 上传顶部图片或者详情图片
* @type {Array}
*/
var files=[];
function setImg(uploadId,imgId,inputId){
  upload.render({
    elem:uploadId,
    url: window.ptfConfig.baseUrl + path.uploadPic,
    headers: { //通过 request 头传递
      Authorization: layui.data(setter.tableName)[setter.headers.accessTokenName]
    },
    size: 1024, //限制文件大小，单位 KB
    choose: function (obj) {
      files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //files = obj.pushFile();
    },
    done: function (res, index, upload) {
      var filePath = res.data[0].url;//"http://192.168.1.66:8093/testReport/uploadPic/  2019629/156179174723094yar9z9.jpg"
      $(inputId).val(filePath);
      //var str = "div[id="+inputId+"] input";
      // var v = filePath;
      //$(str).val(v);
      //获取img对象
      var img = document.getElementById(imgId);
      //建一条文件流来读取图片
      var reader = new FileReader();
      //根据url将文件添加的流中
      reader.readAsDataURL(files[index]);
      //实现onload接口
      reader.onload = function (e) {
        //获取文件在流中url
        var url = reader.result;
        //将url赋值给img的src属性
        img.src = url;
      };
      delete this.files[index];
    },
    /*error: function (msg) {
      layer.msg(msg, {
        icon: 5
      });
    }*/


  });
}

编辑时回显图片

/*编辑时回显图片*/
if(panoramaEntity.stockImages!=null){
  bannerImgList = panoramaEntity.stockImages.split(",");
  if (bannerImgList != null && bannerImgList != "") {
    for (var i = 0; i < bannerImgList.length; i++) {
      var srcValue = window.ptfConfig.baseUrl + "/readImage?url=" + bannerImgList[i] + "&access_token=" + access_token;
      $('#topImage').append('<div style="display: inline-block;margin-left: 10px;"><div id="topValue" style="margin:0 auto;width: 100px;height: 100px;border:1px solid #c0b5a8;"><img id="top'+topIds+'" src="' + srcValue + '" height="100px" width="100px" class="layui-upload-img">' + '<input type="hidden" name="imgPath" id="topInput'+topIds+'" value="'+ bannerImgList[i] +'"/></div><i class="topImage close layui-icon" style="margin: 0 43px"></i></div>');
      topIds++;
      $(".topImage").on('click',function(){
        $(this).parent().remove();
      });
    }
  }
}

效果图如下