首先利用File API的slice方法将大文件切分为多个小块，再通过Blob对象逐个上传分块，实现稳定、支持断点续传的大文件上传机制。
在HTML5中处理大文件上传，尤其是实现分块上传，主要依赖于File API和Blob对象的切片功能。通过将大文件拆成小块逐个上传，可以提升上传稳定性、支持断点续传，并减少内存占用。
使用File API读取并切分文件
HTML5的File API允许前端访问用户选择的文件。通过File.slice()方法（或兼容写法webkitSlice/ while (start < file.size) {
const chunk = file.slice(start, start + chunkSize);
uploadChunk(chunk, start, file.name);
start += chunkSize;
}
});
const fileInput = document.getElementById('file');
fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
const chunkSize = 1 * 1024 * 1024; // 每块1MB
let start = 0;
使用FormData和Ajax上传数据块
每个文件块可以通过FormData封装，并利用XMLHttpRequest发送到服务器。同时附带块序号、文件名、总大小等元信息，便于服务端重组。
立即学习“前端免费学习笔记（深入）”；
上传函数示例：
function uploadChunk(chunk, start, filename) {
const formData = new FormData();
formData.append('chunk', chunk);
formData.append('filename', filename);
formData.append('start', start);
formData.append('size', chunk.size);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/chunk', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log(块 ${start} 上传成功);
}
};
xhr.send(formData);
}
服务端接收与合并文件块
服务端需接收每个块并按文件名和偏移位置保存临时文件。当所有块上传完成后，按顺序合并成完整文件。
例如Node.js（Express）可这样处理：
app.post('/upload/chunk', (req, res) => {
const { filename, start } = req.body;
const chunk = req.files.chunk;
const path = `./temp/${filename}.part${start}`;
chunk.mv(path, (err) => {
if (err) return res.status(500).send(err);
res.send('OK');
});
});
合并逻辑可在客户端通知“上传完成”后触发，或通过服务端监听所有块是否齐全自动执行。
增强功能：进度显示与断点续传
结合XMLHttpRequest.upload.onprogress事件，可实时显示上传进度。
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
const percent = (e.loaded / e.total) * 100;
console.log(`上传进度: ${percent}%`);
}
};
实现断点续传的关键是服务端记录已上传的块。上传前先请求服务器获取已上传的偏移列表，跳过重复上传。
基本上就这些。利用File API的切片能力和Ajax异步上传，前端能高效处理大文件，配合合理的服务端设计，可构建稳定的大文件上传系统。
