Layui如何监听文件上传的进度百分比-Layui教程-PHP中文网

progress回调不触发需同时满足四条件：layui≥2.5.5、auto:false、before中return false、url正确且后端支持multipart/form-data；多文件上传时lay-filter必须唯一，否则进度覆盖；n===100仅表示请求发完，非上传成功。

最常见的情况是写了progress却完全没输出，根本原因是layui压根没进入进度监听流程。必须同时满足以下四点，progress才会被调用：

layui 版本 ≥ 2.5.5（查 layui.version，旧版无此回调）
auto: false（默认为 true，此时 progress 被跳过）
before 回调中 显式 return false（仅写 before 不够，漏掉这句就自动发请求）
url 配置正确，且后端接收方式支持 multipart/form-data（传 base64 或普通 json 会导致浏览器无法上报已发送字节数）

所有文件共用同一个 lay-filter="demo"，结果就是后一个文件的进度直接刷掉前一个——这不是 bug，而是 element.progress() 的匹配逻辑决定的。

每个文件生成独立标识，例如 "progress-" + index
HTML 中动态插入带不同 lay-filter 的进度条：<div class="layui-progress" lay-filter="progress-0"></div>
progress 回调里调用 element.progress("progress-" + index, n + "%")
别忘了在 done 或 error 里手动设为 "100%"，否则可能卡在 99%

progress 里的 n 是浏览器发出请求体的完成度，不是服务端处理结果。常见错误是在 progress 里判断 n === 100 就隐藏 loading 或启用按钮。

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

下载

n === 100 只表示“发完了”，done 才代表“服务器返回了成功响应”
大文件场景下，progress 到 100% 后常要等几秒才进 done（服务端校验、写磁盘、网络延迟）
建议加中间态提示，比如“正在保存…”而非立刻切换 UI 状态
若进度卡在 99% 不动，大概率是服务端配置问题（如 Nginx client_max_body_size、PHP upload_max_filesize 限制）

进度事件依赖 XMLHttpRequest.upload.onprogress，IE10+ 才有，IE9 及以下浏览器压根不会触发 progress 回调。

前端代码再完美，服务端上传限制没调大，照样卡住：Nginx 默认 client_max_body_size 1m，PHP 默认 upload_max_filesize 2M
这些限制导致连接提前关闭，前端看到进度停在某个值、无 error、也收不到 done
排查顺序应是：先确认服务端日志是否有 413 错误，再查 Nginx/PHP 配置，最后看前端逻辑