layui 上传多图片

在 layui 中实现多图片上传可以使用 layui 的 upload 组件。下面是一个简单的示例代码：

HTML 代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="test-upload-normal">上传图片</button>
  <div class="layui-upload-list">
    <table class="layui-table">
      <thead>
        <tr><th>文件名</th><th>大小</th><th>操作</th></tr>
      </thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
</div>

JavaScript 代码：

layui.use('upload', function(){
  var upload = layui.upload;
  
  //执行实例
  var uploadInst = upload.render({
    elem: '#test-upload-normal', //绑定元素
    url: '/upload/', //上传接口
    multiple: true, //支持多文件上传
    done: function(res){
      //上传完毕回调
      console.log(res);
      var demoList = $('#demoList');
      //添加图片到列表中
      demoList.append('<tr><td><img src="'+ res.url +'" class="layui-upload-img"></td><td>'+ res.size +'</td><td><button class="layui-btn layui-btn-xs demo-delete">删除</button></td></tr>')
    },
    error: function(){
      //请求异常回调
    }
  });
  
  //删除图片
  $('body').on('click', '.demo-delete', function(){
    $(this).parents('tr').remove();
  });
  
});

注意：需要引入 layui 的 upload 组件和 jQuery 库。

上面的代码实现了一个支持多图片上传的功能，并且可以在上传成功后将上传的图片添加到一个列表中，同时也可以删除列表中的图片。