<!-- title 标题
fvalue 值
field 字段名称
name  字段标识 -->

<div class="layui-form-item">
  <label class="layui-form-label">图片</label>
  <div class="layui-input-block">
    <button type="button" class="layui-btn layui-btn" id="testList"><i class="layui-icon"></i>上传</button>
    <div class="layui-inline layui-word-aux">
      可上传多个
    </div>

    <div class="layui-upload-list" style="max-width: 1000px;">
      <table class="layui-table">
        <colgroup>
          <col>
          <col width="200">
          <col width="100">

        </colgroup>
        <thead>
          <tr>
            <th>文件名</th>
            <th>查看</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="demoList">
          <?

          $temp = explode(",", $row['imgs']);
          $temp = empty($temp[0]) ? [] : $temp;
          foreach ($temp as $key => $value) {
            $a = preg_match('#(jpg|png|gif)#i', $value);

          ?>
            <tr>
              <td><input type='text' name='imgs[]' value='<?= $value ?>' autocomplete='off' class='layui-input'></td>
              <td><a target="_blank" href="<?= $value ?>">
                  <? if ($a == 1) { ?>
                    <img src="/<?= $value ?>" alt="" style="width: 38px; height: 38px; object-fit: cover">
                  <? } else { ?>
                    <i class='layui-icon layui-icon-file-b' style='font-size:22px; color:#999'></i>
                  <? } ?>

                </a></td>
              <td class="removeclass">删除</td>
            </tr>

          <? } ?>
        </tbody>
      </table>
    </div>

  </div>
</div>
<script>
  layui.use(['upload'], function() {

    var upload = layui.upload
    var $ = layui.jquery;


    //演示多文件列表
    var uploadListIns = upload.render({
      elem: '#testList',
      elemList: $('#demoList') //列表元素对象
        ,
      url: '../index.php?class=base&act=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        ,
      accept: 'file',
      exts: "jpg|png|gif",
      multiple: true,
      number: 10,
      auto: true,
      bindAction: '#testListAction',
      choose: function(obj) {

      },
      done: function(res, index, upload) { //成功的回调
        res.isimg = 1; //强制先1，因为这块用不到file格式
        if (res.isimg == 1) {
          kan = "<img src='/" + res.src + "' style='width:30px; height:30px'>";
        } else {
          kan = "<i class='layui-icon layui-icon-file-b' style='font-size:22px; color:#999'></i>";
        }
        var str = "<tr><td><input type='text' name='imgs[]' value='" + res.src + "' autocomplete='off' class='layui-input' ></td><td><a target='_blank' href='" + res.src + "'>" + kan + "</a></td><td class='removeclass'>删除</td></tr>"
        $("#demoList").append(str);
      },
      allDone: function(obj) { //多文件上传完毕后的状态回调
        console.log(obj)
      },
      error: function(index, upload) { //错误回调

      },
      progress: function(n, elem, e, index) { //注意：index 参数为 layui 2.6.6 新增

      }
    });

    $("body").on("click", ".removeclass", function(e) { //user click on remove text  

      $(this).parent().remove(); //remove text box  

    })


  })
</script>
<style type="text/css">
  .removeclass {
    cursor: pointer;
  }
</style>