Layui实现多图上传预览和删除功能

在开发项目时，我们有时需要用到多图上传，比如商品缩列图等，我们可以使用layui自带的多图上传，不需要安装任何插件。

效果展示：

1、前端HTML部分代码

<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">商品图</label>
    <div class="layui-input-block">
      <button type="button" class="layui-btn" id="test2">多图片上传</button>
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
        <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"></div>
        <input type="hidden" name="imgs" class="multiple_show_img" value="" />
      </blockquote>
    </div>
  </div>

2、css样式

<style type="text/css">
  .uploader-list {
    margin-left: -15px;
  }
  .uploader-list .info {
    position: relative;
    margin-top: -25px;
    background-color: black;
    color: white;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.5;
    opacity: 0.5;
    width: 100px;
    height: 25px;
    text-align: center;
    display: none;
  }
  .uploader-list .handle {
    position: relative;
    background-color: black;
    color: white;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.5;
    opacity: 0.5;
    width: 100px;
    text-align: right;
    height: 22px;
    margin-bottom: -22px;
    display: none;
  }
  .uploader-list .handle i {
    margin-right: 5px;
  }
  .uploader-list .handle i:hover {
    cursor: pointer;
  }
  .uploader-list .file-iteme {
    margin: 12px 0 0 15px;
    padding: 1px;
    float: left;
  }
</style>

3、js代码：

<script>
var multiple_images = [];
  layui.use(['upload','form'], function () {
    var form = layui.form,
      layer = layui.layer,
      upload = layui.upload,
      $ = layui.$;

     //多图上传
     upload.render({
      elem: '#test2'
      ,url: '{:url("admin.upload.uploadImgWater")}' //改成您自己的上传接口
      ,multiple: true
      ,exts:'jpg|png|gif|bmp|jpeg'
      ,size: 6144
      ,data:{type:'aesthetics'}
      ,before: function(obj){
        layer.msg('图片上传中...', {
          icon: 16,
          shade: 0.01,
          time: 0
        })
      }
      ,done: function(res){
         multiple_images.push(res.data.src);
          $('.multiple_show_img').val(multiple_images);//把多选择的图片的地址统一放这里

          console.log(multiple_images)

        layer.close(layer.msg());//关闭上传提示窗口
        //上传完毕
        $('#uploader-list').append(
          '<div id="" class="file-iteme">' +
          '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
          '<img style="width: 100px;height: 100px;" src='+ res.data.src +'>' +
          '<div class="info">' + res.data.src + '</div>' +
          '</div>'
        );
      }
    });
    //监听提交
    $(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();
      }
    });
    // 删除图片
    $(document).on("click", ".file-iteme", function(event){
      var img = $(this).children('img').attr('src')
      const index = multiple_images.indexOf(img);
      if (index !== -1) {
        multiple_images.splice(index, 1); // 从找到的索引开始删除 1 个元素
      }
      $('.multiple_show_img').val(multiple_images)
      console.log(multiple_images)

      $(this).remove()
       $.ajax({
        url:"{:url('admin.aesthetics.del')}",
        type:'post',
        data:{ img: img},
        timeOut:0,
        datatype:'json',
        success:function(msg){
        }
      });
    });
     
  });

</script>

4、后端接口格式返回参考

return json(['code'=>1,'msg'=>'上传成功','data'=>['src'=>$src]]);