如何对接浏览器显示的文件上传进度并获取其数值？

1. 能不能对接Chrome左下角的进度条并获取进度值？ #

遗憾的是，Chrome左下角的这个上传进度条是浏览器内部的私有UI组件，并没有公开API让网页直接读取它的进度数值——你没法直接从网页代码里拿到这个进度条的百分比变量。

不过如果是你自己实现的文件上传功能，完全可以通过Web API自己计算并同步进度，效果和浏览器原生提示一致：

• 用XMLHttpRequest的progress事件：监听上传过程中已发送字节数和总字节数，自己算出进度百分比。
• 或者用Fetch API结合ReadableStream跟踪上传进度（不过Fetch的进度处理相对繁琐一点）。

给你个简单的XHR示例参考：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/your-upload-endpoint', true);
xhr.upload.addEventListener('progress', (e) => {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(`上传进度：${Math.round(percentComplete)}%`);
    // 这里可以把percentComplete用来更新你自己的进度条
  }
});
xhr.send(yourFormData);

2. Chrome是如何生成这个百分比数值的？ #

Chrome的上传进度计算逻辑核心依赖底层网络栈的字节跟踪：

• 首先它会获取上传请求的总内容长度——一般来自请求头的Content-Length字段，文件上传或表单上传时，浏览器能提前知道要发送的总字节数。
• 然后实时跟踪网络层实际已发送的字节数，用已发送字节数 / 总字节数 * 100算出百分比。
• 如果遇到Transfer-Encoding: chunked（总长度未知）的情况，Chrome可能会显示不确定的进度条，或者根据已发送的块数估算进度，但这种场景比较少见。

说白了就是通过对比已上传数据量和总数据量，实时计算出进度百分比，再同步到左下角的UI组件上。

3. 这个功能是不是仅Chrome浏览器独有？ #

当然不是！主流现代浏览器都有类似的上传进度提示，只是UI表现形式不一样：

• Edge（基于Chromium内核）：和Chrome几乎一致，也是在左下角显示带百分比的进度条。
• Firefox：上传进度会显示在地址栏右侧，或者标签页标题旁。
• Safari：会在地址栏附近显示进度指示器，样式和Chrome/Firefox不同，但核心的进度跟踪逻辑是相通的。

这些浏览器的进度计算本质都是基于HTTP请求的字节传输情况，只是UI呈现方式有差异而已。

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