用JS实现上传进度条，让远程办公更高效

在远程办公中，上传文件是再常见不过的操作。比如你正在和团队协作处理一个项目，需要把最新的设计稿或报表上传到共享平台。可每次点完上传，就只能干等着，不知道到底传到哪了，这种体验挺让人焦虑的。

为什么需要上传进度条

没有进度反馈的上传就像发消息不回“已读”。你不知道是卡了、慢了，还是已经成功。而一个简单的上传进度条，能立刻让用户心里有底。特别是在网络不太稳定的情况下，看到进度一点一点走，至少知道系统还在工作。

用原生JS实现上传进度监控

其实实现这个功能并不复杂，核心是利用 XMLHttpRequest 的 upload.onprogress 事件。下面是一个实用的例子：

const fileInput = document.getElementById('file-upload');
const progressBar = document.getElementById('progress-bar');

fileInput.addEventListener('change', function (e) {
  const file = e.target.files[0];
  const formData = new FormData();
  formData.append('file', file);

  const xhr = new XMLHttpRequest();

  // 监听上传进度
  xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      progressBar.style.width = percentComplete + '%';
      progressBar.textContent = Math.round(percentComplete) + '%';
    }
  };

  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log('上传成功');
    }
  };

  xhr.open('POST', '/upload-api');
  xhr.send(formData);
});

上面这段代码绑定了文件选择事件，并在上传过程中动态更新页面上的进度条元素。你可以把它集成到任何表单里，比如公司内部的文档提交系统或者远程打卡附件上传功能。

结合CSS让进度条更直观

光有功能还不够，视觉反馈也得跟上。一个简单的样式能让进度条更清晰：

.progress-container {
  width: 100%;
  height: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0;
}

#progress-bar {
  display: block;
  height: 100%;
  background-color: #4CAF50;
  text-align: center;
  line-height: 24px;
  color: white;
  width: 0;
  transition: width 0.3s ease;
}

这样，无论是上传合同、会议录音还是项目截图，用户都能清楚看到当前状态。尤其在多人协作场景下，减少重复询问“你传了吗”，提升沟通效率。

实际应用场景

比如你在外地出差，通过公司网页上传一份几十兆的视频会议记录，进度条能帮你判断是否需要换个网络环境继续传。再比如团队成员分布在不同时区，异步协作时，明确的上传反馈可以避免因误解导致的重复操作。

加入上传进度条后，整个流程看起来更专业，用起来也更安心。不需要依赖第三方库，几行JS就能搞定，对轻量级远程办公工具来说，是个性价比很高的优化点。