在HTML5开发中，直接通过普通表单或单一请求上传大文件容易造成浏览器主线程阻塞、内存占用过高，从而出现页面卡顿或无响应。要解决这个问题，通常采用分片上传、异步传输与进度监控相结合的方式，让大文件上传过程保持稳定流畅。
为什么大文件直接上传会卡顿
浏览器在读取和发送超大文件时，如果一次性将整个文件读入内存并发送，会占用大量内存与网络带宽，且上传期间无法拆分任务，导致UI线程被长时间占用。使用HTML5的File与Blob接口，可以将文件切成小片，逐块发送。
核心方法：分片上传
通过Blob.slice()方法把文件拆成固定大小的分片，再用异步请求逐片上传。下面是一个基础的分片上传示例：
// 选择文件后触发
function uploadFile(file) {
var chunkSize = 2 * 1024 * 1024; // 每片2MB
var totalChunks = Math.ceil(file.size / chunkSize);
var currentChunk = 0;
function sendChunk() {
if (currentChunk >= totalChunks) {
console.log('上传完成');
return;
}
var start = currentChunk * chunkSize;
var end = Math.min(start + chunkSize, file.size);
var blob = file.slice(start, end); // 切割文件
var formData = new FormData();
formData.append('file', blob);
formData.append('index', currentChunk);
formData.append('total', totalChunks);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://ipipp.com/upload');
xhr.onload = function() {
if (xhr.status === 200) {
currentChunk++;
sendChunk(); // 继续传下一片
}
};
xhr.send(formData);
}
sendChunk();
}
提升流畅度的补充策略
并发控制
可以适当同时上传多个分片，但需限制并发数，防止浏览器请求过多：
- 使用队列管理分片任务
- 并发数建议控制在3到5之间
- 某片失败可单独重试
断点续传
在服务器端记录已接收的分片索引，刷新或中断后，前端先查询已传分片，再从缺失位置继续上传。
进度反馈
利用xhr.upload.onprogress事件更新进度条，避免用户误以为卡死。
小结
HTML5大文件流畅上传的稳法就是：分片切割、异步发送、并发受限、断点续传和实时进度。按照上述思路实现，即使几百兆文件也能平稳上传不卡顿。