layui 多图上传 列表显示

要在layui中实现多图上传并在列表中显示，需要进行以下步骤：

1. 引入layui和layui的上传模块：

// 引入layui
<script src="layui/layui.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">

// 引入layui的上传模块
<script src="layui/layui.all.js"></script>

2. 编写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>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>
</div>

3. 初始化上传组件：

layui.use('upload', function(){
  var upload = layui.upload;
  
  //执行实例
  var uploadInst = upload.render({
    elem: '#test-upload-normal' //绑定元素
    ,url: '/upload/' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});

4. 在上传完毕的回调函数中，将文件名、大小、状态等信息以HTML格式添加到列表中：

done: function(res){
  //上传完毕回调
  var demoList = $('#demoList');
  var tr = $('<tr></tr>');

  tr.append('<td>'+ res.filename +'</td>');
  tr.append('<td>'+ res.size +'</td>');
  tr.append('<td>上传成功</td>');
  tr.append('<td><button class="layui-btn layui-btn-xs demo-btn-delete">删除</button></td>');
  demoList.append(tr);
}

5. 添加删除按钮的点击事件，实现删除文件并从列表中移除：

$('.layui-upload-list').on('click', '.demo-btn-delete', function(){
  $(this).parents('tr').remove();
});

通过以上步骤，就可以在layui中实现多图上传并在列表中显示了。