2.jquery+layui多文件上传回显编辑

在使用 jQuery 和 Layui 进行多文件上传并实现回显编辑的功能时，你可以使用 Layui 的 upload 组件上传文件，并使用 form 组件的 render 方法来回显编辑。以下是一个简化的示例：

HTML 部分：

<form class="layui-form" action="">
  <div class="layui-form-item">
    <!-- 多文件上传的表单项 -->
    <button type="button" class="layui-btn layui-btn-normal" id="testList">多文件上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
      预览图片：
      <div class="layui-upload-list" id="demo1"></div>
    </blockquote>
  </div>
</form>

JavaScript 部分：

layui.use(['upload', 'form'], function(){
  var upload = layui.upload;
  var form = layui.form;
  
  //多文件上传
  upload.render({
    elem: '#testList',
    url: '/upload/', //改成你的文件处理 URL
    multiple: true,
    before: function(obj){
      //预上传的处理
    },
    done: function(res){
      //上传完毕回调
      // 假设返回的 res.data 是一个包含文件路径的数组
      $.each(res.data, function(i, item){
        // 回显图片
        var img = '<img src="' + item + '" alt="' + i + '" lay-event="delete" class="layui-upload-img">';
        $('#demo1').append(img);
      });
      form.render('upload', 'test'); // 更新上传列表的显示
    }
  });
  
  //删除图片
  $('#demo1').on('click', 'img', function(){
    var index = $(this).attr('alt');
    // 执行删除图片的操作，例如 AJAX 请求后台删除文件
    $(this).remove();
    form.render('upload', 'test'); // 更新上传列表的显示
  });
  
});

在这个示例中，我们使用了 upload.render 方法来初始化多文件上传，并在上传完成后通过 $.each 遍历返回的文件路径数组，使用字符串拼接创建图片元素，并追加到页面中的 #demo1 元素内。同时，我们绑定了图片元素的点击事件，用于删除图片，并更新上传列表的显示。

请注意，你需要根据实际的后端接口和返回值来调整上传和删除的处理逻辑。