清空文件列表需先清空 .layui-upload-list 的 innerHTML，再执行 uploadInst.files = [] 和 uploadInst.reload()，三步缺一不可；仅清 DOM 或仅重置 JS 队列均会导致 UI 与状态错位。

上传成功后清空文件列表的 DOM 节点

直接操作 .layui-upload-list 的 innerHTML 是最稳妥的方式，因为 Layui 不会自动清理预览区 DOM，即使你清了 JS 队列，缩略图或文件名表格仍挂着。

常见错误是只执行 uploadInst.files = [] 或 form.reset()，结果 UI 上还显示着“已选 2 个文件”，用户再点上传按钮又发一遍——这根本不是清空，是假装清空。

• uploadInst.config.elem.next('.layui-upload-list').html('')：精准定位到上传组件紧邻的预览容器并清空 HTML
• 必须在 done 回调里执行，且确保该 DOM 节点确实存在（有些模板把 .layui-upload-list 写在别处，需用开发者工具确认真实 class 或 id）
• 如果用了自定义预览结构（比如手写 ），请改用对应选择器，例如 $('#demoList').html('')

  为什么 form.reset() 和清空 都无效

  因为 Layui 上传组件压根没用原生 做状态载体。它在点击“选择文件”时动态创建一个临时 input，读取完 files 就扔掉，所有状态都存在 JS 实例里。

  你手动设 document.querySelector('input[type="file"]').value = ''，或者调 form.reset()，只是清掉了那个早已被丢弃的 input，对当前组件零影响。

  • 真实状态在 uploadInst 实例中，不在 DOM 属性里
  • 哪怕你在控制台看到页面上有个隐藏的 ，它也和当前上传逻辑无关
  • 试图通过 DOM 操作“欺骗”组件重绘，只会导致 UI 和 JS 状态错位

  清空 DOM 后必须调用 reload()

  只清 DOM 不 reload，组件内部仍认为自己处于“已选文件”状态：上传按钮文字还是“重新上传”，点击后依然会发请求，甚至可能把空队列也提交一次。

  

  深蓝色网站后台管理系统layui框架模板-AdminPro

  一款深蓝色网站后台管理系统layui框架模板

  下载

  reload() 的作用不是刷新界面，而是让组件重新读取自身配置、重置内部标记位，并把按钮文字切回“选择文件”。这是 Layui 唯一公开支持的状态重置方式。

  • 顺序不能错：先清 DOM → 再清 JS 队列（uploadInst.files = []）→ 最后 uploadInst.reload()
  • 漏掉 reload()，下次点击上传按钮时，choose 回调都不会触发
  • 不要在 done 里调 uploadInst.destroy() 再重新 render，开销大且易引发事件绑定冲突

  弹窗场景下容易被忽略的“幽灵文件”

  如果上传组件渲染在 layer.open 弹窗里，用户点了“选择文件”但没点上传就关掉弹窗，此时 UPLOAD_FILES 变量还在内存里，DOM 虽然被销毁了，但 JS 对象没被 GC —— 下次打开弹窗，用户没选任何文件，一按上传按钮，“幽灵文件”就跟着发出去了。

  这不是 bug，是变量生命周期没管好。真正的清空，得在弹窗关闭前就动手。

  • 在 layer.close() 前，手动执行 uploadInst.files = [] + 清空 DOM + uploadInst.reload()
  • 更保险的做法：把 uploadInst 存在弹窗 DOM 的 data- 属性里，关闭时遍历所有弹窗实例统一清理
  • 千万别依赖“用户没点上传，我就当没这回事”——JS 对象不会自动消失