layui多图上传实现删除功能的方法

1. 前言

本文将介绍如何使用layui多图上传实现删除功能。Layui是一款轻量级的前端UI框架，其提供了丰富的组件和功能模块，具有简单易用、高效美观等特点。其中多图上传组件是layui中的常用功能之一，但是其默认不支持删除已上传的图片。因此，本文将通过实现一个自定义的多图上传组件，来实现删除已上传图片的功能。

2. 多图上传实现的基本步骤

在实现多图上传的功能之前，我们需要先了解其基本步骤：

2.1. 引入相关文件

我们需要引入Layui的相关文件，包括layui.js和layui.css。同时，我们还需要引入jquery.js以及自定义的上传组件样式文件。

<!-- 引入layui样式文件 -->
<link rel="stylesheet" href="path/to/layui/css/layui.css">
<!-- 引入自定义样式文件 -->
<link rel="stylesheet" href="path/to/custom/css/upload.css">
<!-- 引入jquery.js -->
<script src="path/to/jquery.js"></script>
<!-- 引入layui.js -->
<script src="path/to/layui.js"></script>

2.2. 创建上传按钮

在页面中创建一个上传按钮，用于触发上传事件。

<div class="layui-upload">
  <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
  <div class="layui-upload-list">
    <ul class="layui-upload-box"></ul>
  </div>
</div>

其中，uploadBtn是上传按钮的id，layui-upload-box是用于显示已上传图片的区域。

2.3. 初始化上传组件

在页面加载完成后，需要对上传组件进行初始化。我们需要指定上传的接口地址、选择文件的方式、上传时其他的额外参数等。

layui.use('upload', function(){
  var upload = layui.upload;
  //执行实例
  var uploadInst = upload.render({
    elem: '#uploadBtn', //上传按钮的id
    url: '/upload/', //上传接口地址
    auto: false, //是否自动上传
    bindAction: '#submitBtn', //绑定提交按钮
    data: { //上传时的额外参数
      username: 'test'
    },
    choose: function(obj){ //选择文件后的回调函数
      obj.preview(function(index, file, result){ //预读文件信息
        //在预览区域添加图片
        $('#preview').append('<img src="'+result+'" alt="'+file.name+'" class="layui-upload-img">');
      });
    },
    done: function(res){ //上传成功后的回调函数
      console.log(res);
    },
    error: function(){ //上传失败后的回调函数
      
    }
  });
});

在上述代码中，我们以auto:false的方式创建了一个上传实例uploadInst。同时，我们使用choose回调函数预读文件信息，并在预览区域添加图片。done回调函数是上传成功后的回调，error是上传失败后的回调。

3. 实现删除已上传的图片

由于layui的多图上传组件默认不支持删除已上传的图片，因此我们需要使用自定义的方式来实现删除功能。具体实现步骤如下：

3.1. 修改done回调函数

在上传完成后，我们需要将已上传的图片信息保存下来，并且显示删除按钮。

done: function(res){ //上传成功后的回调函数
  console.log(res);
  if(res.code == 0){ //上传成功
    //添加已上传的图片信息
    var imgItem = '<li class="layui-upload-item">'+
                 '  <img src="'+res.data.src+'" alt="'+res.data.name+'" class="layui-upload-img">'+
                 '  <i class="layui-icon layui-icon-delete"></i>'+
                 '</li>';
    $('.layui-upload-box').append(imgItem);
  }else{ //上传失败
      
  }
}

在添加已上传图片的代码中，我们使用了一个\元素来表示删除按钮，同时使用了layui-icon-delete这个图标。

//删除已上传的图片
$('.layui-upload-box').on('click', '.layui-icon-delete', function(){
  $(this).parent().remove();
});