如何在Google Chrome中监控文件上传的百分比进度？

方案1：控制台粘贴代码监控进度 #

根据你的表单上传类型，选择对应的代码粘贴到Chrome开发者工具的Console标签：

针对AJAX/XMLHttpRequest上传 #

(function() {
  const originalOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function(method, url) {
    this.upload.addEventListener('progress', function(e) {
      if (e.lengthComputable) {
        const percentComplete = Math.round((e.loaded / e.total) * 100);
        console.log(`上传进度: ${percentComplete}%`);
      }
    });
    return originalOpen.apply(this, arguments);
  };
})();

针对传统HTML表单提交（页面会刷新的情况） #

(function() {
  document.addEventListener('submit', function(e) {
    const form = e.target;
    if (form.enctype === 'multipart/form-data' && form.method === 'POST') {
      const xhr = new XMLHttpRequest();
      xhr.open(form.method, form.action);
      xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100);
          console.log(`表单上传进度: ${percent}%`);
        }
      });
      xhr.send(new FormData(form));
      e.preventDefault();
    }
  });
})();

代码执行后，控制台会实时输出上传的百分比进度。

方案2：利用Chrome Performance标签页 #

1. 打开Chrome开发者工具的「Performance」标签
2. 点击录制按钮（圆形红点）开始记录
3. 触发文件上传操作
4. 录制过程中，在网络请求列表里找到对应上传请求，查看其「Uploading」阶段的进度条，就能实时看到上传进度；录制结束后也可回溯查看完整进度变化。

方案3：安装浏览器扩展 #

可以安装如Upload Progress Monitor这类专注于上传进度监控的Chrome扩展，它们会在浏览器界面（如地址栏旁）实时显示上传进度，无需任何代码操作。

内容的提问来源于stack exchange，提问作者Liam