ajax本身不直接支持断点续传,但可通过filereader切片、blob分块、服务端分片校验与状态记录实现:1.用slice()切块+filereader读取;2.本地或服务端持久化上传进度;3.上传时携带chunkindex、fileid等元信息;4.服务端需支持分片存储、状态查询与合并。

Ajax 本身不直接支持断点续传,但可以结合 FileReader、Blob 切片(slice)、服务端分片校验与记录机制,实现前端可控的大文件断点续传。核心在于:把文件切块上传、记录已传偏移量、失败后从断点继续。
1. 文件切片与分块读取
使用 FileReader 配合 Blob.slice() 按固定大小(如 2MB)将大文件切分为多个 chunk,逐个读取并上传,避免内存溢出和阻塞主线程。
- 用 File.prototype.slice(start, end) 获取每个分块的 Blob 对象
- 每个 chunk 用 FileReader.readAsArrayBuffer() 读取为 ArrayBuffer,再转成 Uint8Array 或 FormData 发送
- 推荐使用 Promise 封装 FileReader,避免回调地狱,便于 async/await 控制流程
2. 上传状态持久化(断点关键)
上传中断后必须知道“传到哪一块了”,需在前端本地记录已成功上传的分块索引或字节偏移量。
- 可用 localStorage/sessionStorage 存储 { fileId: 'xxx', uploadedChunks: [0,1,2], totalSize: 10485760 }
- 更健壮的做法是上传前先向服务端发起预检请求(如 POST /upload/init),获取已有上传记录(服务端存有该文件的已收分块列表)
- 前端对比本地记录与服务端返回,决定从第几块开始续传,避免因本地缓存丢失导致重复上传
3. Ajax 请求携带分片元信息
每次上传 chunk 必须告诉服务端:“这是第几块?属于哪个文件?总大小多少?”以便服务端拼接和校验。
- 通过 FormData 添加字段:chunkIndex(当前块序号)、totalChunks、fileId(唯一标识,如文件 hash 或 UUID)、fileName
- 也可用自定义 header(如 X-Chunk-Index: 5),但 FormData 更兼容表单上传场景
- 建议对整个文件计算MD5 或 SparkMD5(支持增量计算)作为 fileId,避免重名冲突,也便于服务端去重
4. 服务端配合逻辑不可少
前端只是控制者,断点续传能否可靠,取决于服务端是否支持分片接收、合并与状态查询。
- 服务端收到 chunk 后,应以 fileId + chunkIndex 命名临时存储(如 Redis 记录已收索引,磁盘存分片文件)
- 提供 /upload/status?fileId=xxx 接口,返回已上传 chunk 列表或已接收字节数
- 最终合并接口(如 POST /upload/merge)由前端触发,服务端校验所有分片齐全后再合成完整文件
不复杂但容易忽略:上传过程中需监听 XMLHttpRequest 的 onerror、onabort 和网络状态变化,失败时保存当前进度;同时建议加上传速度估算和剩余时间提示,提升用户体验。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











