javascript如何实现文件上传_进度监控怎样完成

推荐使用 XMLHttpRequest 实现文件上传进度监控，通过 xhr.upload.onprogress 事件获取 loaded 和 total 计算百分比；Fetch 需 ReadableStream 手动处理且兼容性差；注意 CORS、分片上传、并发控制及移动端兼容性。

JavaScript 实现文件上传并监控进度，核心是使用 XMLHttpRequest（或 Fetch API 配合 ReadableStream）配合 progress 事件。现代浏览器中推荐用 XMLHttpRequest.upload.onprogress 获取上传进度，它能实时反馈已上传字节数。

使用 XMLHttpRequest 监控上传进度

这是最稳定、兼容性好且原生支持进度监听的方式：

• 创建 XMLHttpRequest 实例，调用 open('POST', url)
• 监听 xhr.upload.onprogress 事件，该事件对象含 loaded（已传字节数）和 total（总字节数）
• 计算进度百分比：Math.round((e.loaded / e.total) * 100)
• 注意：只有在发送 FormData（含文件）时，total 才有值；纯文本请求可能不触发 progress

用 Fetch + Upload Progress（需手动流式处理）

Fetch 本身不直接暴露上传进度，但可通过 ReadableStream + pipeTo 拦截上传数据流（仅 Chromium 120+ 和 Firefox 125+ 支持）：

• 将文件转为 ArrayBuffer 或使用 file.stream()
• 创建自定义 TransformStream，在 transform() 中累加已读字节并派发自定义进度事件
• 将处理后的流传入 fetch(url, { method: 'POST', body: processedStream })
• 实际项目中更推荐回退到 XMLHttpRequest，除非明确需要 Fetch 的其他特性（如 AbortSignal 统一控制）

关键细节与常见问题

避免踩坑，要注意以下几点：

标签： javascript java html 前端 cookie 浏览器 字节 access safari 后端 ios s