HTML文件上传进度需用JavaScript监听xhr.upload.onprogress事件，通过e.loaded/e.total计算百分比并更新progress.value，禁用表单默认提交，用FormData手动发送请求。

HTML 文件上传进度无法靠 `` 自身实现，也不能用纯 CSS 动画“假装在传”。真实百分比必须基于网络传输过程，通过 JavaScript 监听底层上传事件，并驱动 `` 更新。

核心前提：不能走表单默认提交

表单 `

` 默认提交会整页跳转，进度条根本来不及渲染。必须拦截提交行为，改用 `XMLHttpRequest` 或 `fetch` 手动发请求。

• 给表单加 `event.preventDefault()`，阻止默认刷新
• 用 `FormData` 收集文件和其它字段（如 `formData.append('file', file)`）
• 注意：`enctype="multipart/form-data"` 在手动发送时不用写在 HTML 表单上，由 `FormData` 自动处理

关键监听：必须用 upload.onprogress，不是 onprogress

`XMLHttpRequest` 有两个不同层级的 `onprogress`：一个是 `xhr.onprogress`（响应下载），另一个是 `xhr.upload.onprogress`（请求体上传）。文件上传进度只认后者。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 创建 xhr 实例后，立刻绑定 `xhr.upload.onprogress = e => { ... }`
• 事件对象 `e` 中，`e.loaded` 是已发出字节数，`e.total` 是文件总大小
• 务必先判断 `if (e.lengthComputable)`，否则 `e.total` 可能为 0，导致计算结果是 `NaN%`

更新 progress 元素要操作 value 属性，不是 setAttribute

<progress id="bar" max="100"></progress> 是语义化容器，它只响应 `.value` 属性变化，不响应 `setAttribute("value", ...)`。

立即学习“前端免费学习笔记（深入）”；

• 正确写法：document.getElementById('bar').value = Math.round((e.loaded / e.total) * 100)
• 记得显式设置 `max="100"`，别依赖浏览器默认值，尤其当后端返回小数时更需取整
• 可同步更新旁边的文字提示，比如 `0%` → el.textContent = `${percent}%`

后端配合要点：Content-Length 头不能少

前端 `e.lengthComputable` 为 `true` 的前提是服务端在响应中返回了 `Content-Length` 头——但注意，这是针对上传请求的响应头，实际影响的是 `xhr.upload.onprogress` 是否可用。更准确地说，`e.total` 的来源依赖于浏览器能否从请求体预知大小，而现代浏览器对 `File` 对象基本都能读取 `.size`，所以只要前端用的是 `File` 实例（而非 `Blob` 或流），`e.total` 就可靠。

• 确保你传的是 `fileInput.files[0]` 这样的原生 `File` 对象
• 避免用 `new Blob([...])` 包裹后再传，可能丢失 `.size` 信息
• IE10+ 支持 `upload.onprogress`，IE9 及更早版本不支持，需做降级提示