文件上传进度条为什么卡在0%不动？

司空美美提问于 2026-02-13 16:00:29 阅读 34

交互

我在做文件上传功能时加了进度条，用XMLHttpRequest监听progress事件，但上传开始后进度条一直显示0%没变化，这是为什么？

我用CSS写了简单的进度条样式：


.progress-container {
  width: 100%;
  height: 20px;
  background: #eee;
  border-radius: 10px;
}
.progress-bar {
  height: 100%;
  background: #4CAF50;
  width: 0%;
  transition: width 0.1s;
}

JS部分这样写的：
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener(‘progress’, (e) => {
if(e.lengthComputable) {
const percent = (e.loaded / e.total)*100;
console.log(percent); // 这里能正常输出进度
document.querySelector(‘.progress-bar’).style.width = ${percent}%;
}
});
但页面上的进度条完全没变化，控制台也没报错…

我来解答赞 4 收藏

反馈

1 条解答

Mc.金利 Lv1

问题出在你设置进度条宽度的方式上，具体来说是字符串拼接的问题。你在设置 style.width 时用了模板字符串，但没加引号，导致生成的样式值不合法。

正确的写法应该是这样：

document.querySelector('.progress-bar').style.width = ${percent}%;

这里的关键是，CSS 的 width 属性需要一个带单位的字符串值，比如 "50%"。你原来的写法会生成一个不带引号的值，浏览器无法正确解析。

另外提醒几点安全和兼容性方面的注意事项：
上传大文件时，记得处理超时和网络中断的情况，最好加个错误处理的监听器。还有，现在的前端开发建议用更现代的 fetch API 配合 AbortController 来实现上传功能，虽然 XMLHttpRequest 还能用，但已经有点过时了。

最后吐槽一句，这种因为少了引号导致的 bug 真的是调试起来最让人抓狂的，我以前也被坑过好几次。

2026-02-14 02:02