progress不执行最常见原因是未在before中return false切断自动上传,导致进度监听链被跳过;必须满足layui≥2.5.5、auto:false、before中return false、后端支持multipart/form-data四个条件。
必须满足四个硬性条件,progress 回调才会触发并显示真实百分比:layui ≥ 2.5.5、auto: false、before 中 return false、后端支持 multipart/form-data。
为什么 progress 从不执行?
最常见原因是没切断自动上传流程。Layui 的 progress 只在「手动上传模式」下工作,而很多人写了 before 却忘了 return false,导致文件立刻发出,整个进度监听链被跳过。
-
before回调里不return false→ 自动上传启动 →progress被忽略 - 漏写
url配置 → 请求发不出去,自然没进度可报 - 后端返回非
200(如413 Request Entity Too Large)→ 浏览器中断上传,progress停在某个值不再更新 - 传的是 base64 字符串(而非原生
File对象)→ 浏览器无法分段上报已发送字节数
多文件上传时进度条互相覆盖?
因为 element.progress() 是靠 lay-filter 匹配 DOM 节点的。如果所有文件共用同一个 lay-filter="demo",后一个文件的进度会直接覆盖前一个。
- 每个文件需生成唯一标识,比如
"progress-" + index - HTML 中动态插入带不同
lay-filter的进度条:<div class="layui-progress" lay-filter="progress-0"></div> - 在
progress回调里调用element.progress("progress-" + index, n + "%") - 别忘了在
done或error后把对应进度条设为"100%",否则可能卡在 99%
n === 100 并不等于上传成功
progress 回调里的 n === 100 只表示浏览器已把请求体发完,但服务端可能还在处理、写磁盘、校验或网络 ACK 延迟——此时响应还没回来,done 还没触发。
- 在
progress里判断n === 100就隐藏 loading 或启用按钮,是典型错误 - 正确节奏:
progress管“发了多少”,done才是“服务器认了”,error是“服务器拒了” - 大文件场景下,
progress到 100% 后可能还要等几秒才进done,建议加中间态提示,比如“正在保存…” - 进度条本身不难,难的是把「发出去」「收回来」「出错了」三个状态和 UI 严格对齐
真正容易被忽略的是:IE10+ 才支持 XMLHttpRequest.upload.onprogress,IE9 及以下压根没有进度事件;且 Nginx/PHP 默认上传限制(如 client_max_body_size、upload_max_filesize)会导致上传中途断连,表现就是进度卡在 99% 不动——这和前端代码无关,得查服务端配置。











