上传进度条不显示？这几个常见原因和解决方法你得知道

传文件的时候，进度条突然不见了，最让人心里没底。明明点了上传，页面却像卡住一样，不知道是成功了还是失败了。这种情况在用网盘、邮箱附件、内容管理系统时都挺常见，其实问题往往出在几个容易忽略的地方。

浏览器兼容性问题

有些网站的上传功能对浏览器版本有要求。比如老版本的 IE 就经常不支持 HTML5 的文件上传 API，导致进度条压根不会出现。换成 Chrome、Edge 或者 Firefox 再试试，大概率就能看到进度条正常工作。

JavaScript 被禁用或加载失败

上传进度条依赖 JavaScript 实现动态更新。如果你的浏览器禁用了脚本，或者网络太差导致页面脚本没加载完，进度条自然不会显示。可以按 F12 打开开发者工具，看看有没有报错信息。如果看到类似 ReferenceError: XMLHttpRequest is not defined 这样的提示，基本就是脚本出了问题。

服务器未返回进度信息

前端有进度条，后端也得配合才行。有些服务器配置没开启上传状态回传，比如 Nginx 默认就不支持 ngx_upload_progress 模块。这时候即使前端写得再完善，也拿不到实时数据。如果是自己搭的服务，可以检查是否安装并启用了相关模块。

代码里漏掉了事件监听

开发人员写上传功能时，如果忘了绑定 onprogress 事件，进度条也不会动。正确的写法应该是：

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        const percent = (e.loaded / e.total) * 100;
        document.getElementById('progress-bar').style.width = percent + '%';
    }
};
xhr.open('POST', '/upload', true);
xhr.send(formData);

文件太大或网络中断

传一个几个 GB 的视频，中途网络抖一下，可能请求就断了，但页面没提示失败，进度条也不走。这时候可以试着刷新页面，或者把文件拆小一点再传。用手机热点传大文件尤其容易出这问题，别以为路由器信号满格就一定稳。

CSS 样式隐藏了进度条

有时候进度条其实在跑，但被 CSS 给藏了。比如设置了 display: none 或者颜色跟背景一样白。打开审查元素，找到进度条对应的 DOM 结构，看看是不是被样式盖住了。临时删掉可疑样式，马上就能验证。

遇到上传进度条不显示，先别急着重新上传。花一分钟检查下浏览器、网络、脚本和样式，往往能省下好几分钟干等的时间。