JavaScript文件上传与进度监控详解

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript文件上传及进度监控方法解析》，聊聊，希望可以帮助到正在努力赚钱的你。

JavaScript文件上传主要用XMLHttpRequest（支持原生进度监听）或fetch（需ReadableStream手动分块模拟进度）；大文件推荐分片上传以实现断点续传与精细进度控制；UI上需节流更新、提供暂停/恢复及明确错误提示。

JavaScript 实现文件上传主要依赖 XMLHttpRequest 或更现代的 fetch API，配合 FormData 构造请求体；进度监控则需利用 XMLHttpRequest.upload.onprogress 事件，fetch 原生不支持上传进度，需借助 ReadableStream + TransformStream 手动分块读取并上报进度。

使用 XMLHttpRequest 实现带进度的文件上传

这是最成熟、兼容性好且原生支持上传进度监听的方式。核心是绑定 upload.onprogress 事件，并在回调中计算已上传字节数与总大小的比例。

• 创建 FormData 实例，用 append() 添加文件（如 formData.append('file', input.files[0])）
• 新建 XMLHttpRequest，设置 onload 和 onerror 处理响应
• 关键步骤：获取 xhr.upload 对象，监听 onprogress，从事件对象的 loaded 和 total 属性读取进度数据
• 注意：若服务端未返回 Content-Length 或启用了 chunked transfer encoding，event.total 可能为 0，此时无法计算精确百分比，只能显示“上传中…”

使用 fetch + ReadableStream 模拟上传进度（现代方案）

fetch 本身不暴露上传过程，但可通过将文件转为 ReadableStream，手动分块读取并逐块发送，同时更新进度状态。

• 调用 file.stream() 获取流，用 getReader() 创建读取器
• 循环 reader.read() 获取 Uint8Array 块，拼接为完整二进制或直接通过 fetch 的 body 发送（需服务端支持流式接收）
• 每次读取后更新已读字节数，触发自定义进度回调
• 实际项目中常借助库如 form-data-encoder 或自行构造 multipart boundary，确保兼容传统表单上传格式

处理大文件分片上传（提升稳定性与可控性）

单次上传大文件易因网络中断失败，分片上传可断点续传、并发控制、独立校验，也天然支持粒度更细的进度反馈。

• 前端按固定大小（如 2MB）切分文件，用 file.slice(start, end) 提取 Blob
• 为每片生成唯一标识（如文件 hash + 片序号），上传时携带分片索引、总片数、hash 等元信息
• 维护一个上传队列，用 Promise.all 或串行方式控制并发；每片上传成功后更新整体进度（如 Math.round((uploadedChunks / totalChunks) * 100)）
• 服务端收到所有分片后合并，并校验最终文件 hash，返回完成结果

UI 层进度反馈与用户体验优化

进度条只是表象，真正影响体验的是响应及时性、错误提示和用户可控性。

• 避免只依赖 onprogress 频繁更新 DOM，可用 requestAnimationFrame 节流或每 500ms 更新一次
• 上传开始后禁用提交按钮，添加“暂停/恢复”按钮（分片场景下较易实现）
• 对 timeout、network error、4xx/5xx 做差异化提示，例如 “网络超时，请重试” 或 “文件类型不支持”
• 上传完成后，展示缩略图（图片）、文件名+大小、下载链接等，形成闭环

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript文件上传与进度监控详解》文章吧，也可关注golang学习网公众号了解相关技术文章。