Layui upload 没有取消选择文件的专用回调,因浏览器原生 不触发取消事件;choose 回调仅在选中文件时执行,无法感知取消;可行方案是主动重置状态或提供显式清空按钮。

Layui upload 没有“取消选择文件”的专用回调,用户点击文件选择框后点「取消」或直接关闭对话框,choose 回调根本不会触发——它只在用户真正选中至少一个文件时才执行。你无法监听“取消”这个动作,因为浏览器原生 就不派发该事件。
为什么不能靠 choose 判断是否取消
choose 是纯正向回调:有文件才进,没文件就不进。它不接收任何“空选择”信号,也不会传入 obj.files 为 null 或空数组。所以你在 choose 里永远看不到“用户点了取消”这一状态。
- 常见误判:在
choose外部监听按钮 click,然后检查obj.files——但此时obj还没生成,变量未定义 - 试图监听
input元素的change事件并读elem.files.length——Layui 内部会清空原生input.files,读出来永远是 0 - 用
before回调判断:它在上传前触发,但此时文件早已入队,且obj.files在 Layui 2.9+ 中已被清空,不可靠
能间接感知“取消”的唯一可行方式
不是监听取消,而是**主动重置选择状态,并把“取消”语义映射到你的业务逻辑中**:
- 给文件选择按钮(如
#upload-btn)单独绑定一个click事件,在点击瞬间就认为“用户开始操作”,记录时间戳或标记isChoosing = true - 在
choose回调第一行设isChoosing = false,表示已确认选中 - 用
setTimeout延迟一小段时间(比如 100ms),如果此时isChoosing仍为true,大概率是用户点了取消 - 注意:这个判断不 100% 精确(比如用户选中极慢、卡顿),但对 UI 反馈(如隐藏预览区、清空计数)足够实用
更推荐的替代方案:放弃监听取消,改用显式清空操作
与其被动等“取消”,不如提供明确的「清空」入口:
- 在上传区域旁加一个
清空已选按钮,点击时调用obj.reset()(仅限单文件)或手动遍历UPLOAD_FILES并delete键值 - 每次打开弹窗前,主动调用
obj.reset()或清空你维护的UPLOAD_FILES缓存,避免幽灵文件残留 - UI 上始终显示当前已选数量(通过
Object.keys(obj.pushFile()).length),用户看到 “0 个文件” 就自然知道没选,无需额外提示“你取消了”
真正容易被忽略的是:choose 的缺失 ≠ 用户取消,它只是什么都没发生。Layui 不暴露取消事件,浏览器也不提供,硬要补这个洞只会引入不可靠的定时器或竞态判断。把交互焦点放在「确认选择」和「主动清空」上,反而更稳定、更可控。











