Layui上传组件怎样实现上传成功后自动在指定容器展示列表

作者：袖梨 2026-07-08

done回调中append DOM是最直接的上传成功后展示列表方式，需用服务器返回的真实文件地址插入可操作条目，避免混淆预览逻辑，指定容器须提前存在且每次append前清空，多文件时注意响应数据结构。

done 回调里 append DOM 是最直接的写法

上传成功后展示列表，核心动作发生在 done 回调里——它拿到服务器返回的真实文件地址（如 res.data.url 或 res.msg），此时才该往页面插入可点击、可删除的条目。

常见错误是把预览逻辑（before 或 preview）当成“上传成功后展示”，结果用户看到的是本地 base64 图，而非服务器上已存的正式链接，一旦刷新就丢失。

指定容器必须提前存在，比如 <div id="file-list"></div>，不能靠 done 里动态创建父容器再塞内容
每次 append 前建议先清空：$('#file-list').empty()，避免重复提交时列表越积越多
如果要支持多文件，done 里别只取 res.data[0]，得确认后端返回的是数组还是单对象；多数场景下，Layui 每次只传一个文件，所以 done 会触发多次

示例片段：

done: function(res) {  if (res.code === 0) {    const item = <div class="file-item">      <a href="${res.data.url}" target="_blank">${res.data.name || '下载'}</a>      <button class="layui-btn layui-btn-danger layui-btn-xs" data-url="${res.data.url}">删除</button>    </div>;    $('#file-list').append(item);  }}

用变量维护文件数组再统一渲染更可控

当需要排序、批量删除、或提交时按顺序传参，光靠直接 append DOM 不够——DOM 顺序和数据顺序容易脱节。推荐用一个全局数组（如 uploadedFiles = []）存每次上传成功的元信息，再集中渲染。

这么做能绕过 DOM 操作的副作用，比如事件绑定错位、重复追加、或移动端 click 失效等问题。

在 done 里 push 数据：uploadedFiles.push({ name: res.data.name, url: res.data.url, id: res.data.id });
单独写个 renderFileList() 函数，遍历 uploadedFiles 生成 HTML 字符串，一次性 $('#file-list').html(...)
删除操作不要直接 $(this).closest('.file-item').remove()，而是从数组里 splice 对应项，再重 render——否则数组和视图永远不同步
注意：如果后端返回的 id 是数据库主键，把它存在 data-id 属性里，后续删除接口就能精准传参

别漏掉样式和交互补丁

纯 DOM 插入后，没样式就是一堆裸链接；没事件绑定，点不了也删不掉。这两块不是可选，是必须补上的最小闭环。

给容器加基础样式：#file-list { padding: 5px 0; }，每个条目加 display: flex; align-items: center; justify-content: space-between;
删除按钮事件必须用事件委托，因为元素是动态添加的：$('#file-list').on('click', '.layui-btn-danger', function() { ... })
如果列表里混了图片，建议加 <img src="${url}" style="max-width:40px;">，但要先判断 /image//.test(url)，避免非图 URL 报错
移动端点击区域太小？给整个 .file-item 加 padding: 8px 12px，比只点按钮更友好