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，确保兼容传统表单上传格式
处理大文件分片上传（提升稳定性与可控性）
单次上传大文件易因网络中断失败，分片上传可断点续传、并发控制、独立校验，也天然支持粒度更细的进度反馈。
立即学习“Java免费学习笔记（深入）”；
-
前端按固定大小（如 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做差异化提示，例如 “网络超时，请重试” 或 “文件类型不支持” - 上传完成后，展示缩略图（图片）、文件名+大小、下载链接等，形成闭环
