HTML 文件上传进度怎么实时监听并展示加载百分比-H5教程-PHP中文网

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

html 文件上传进度怎么实时监听并展示加载百分比

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` 就可靠。