首先利用File API的slice方法将大文件切分为多个小块，再通过Blob对象逐个上传分块，实现稳定、支持断点续传的大文件上传机制。
在html5中处理大文件上传，尤其是实现分块上传，主要依赖于File API和Blob对象的切片功能。通过将大文件拆成小块逐个上传，可以提升上传稳定性、支持断点续传，并减少内存占用。
使用File API读取并切分文件
html5的File API允许前端访问用户选择的文件。通过File.slice()方法（或兼容写法webkitSlice/
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; <p>while (start < file.size) { const chunk = file.slice(start, start + chunkSize); uploadChunk(chunk, start, file.name); start += chunkSize; } });</p>
使用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); <p>const xhr = new XMLHttpRequest(); xhr.open('POST', '/upload/chunk', true); xhr.onload = function() { if (xhr.status === 200) { console.log(<code>块 ${start} 上传成功</code>); } }; xhr.send(formData); }</p>
服务端接收与合并文件块
服务端需接收每个块并按文件名和偏移位置保存临时文件。当所有块上传完成后，按顺序合并成完整文件。
例如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}`; <p>chunk.mv(path, (err) => { if (err) return res.status(500).send(err); res.send('OK'); }); });</p>
合并逻辑可在客户端通知“上传完成”后触发，或通过服务端监听所有块是否齐全自动执行。
增强功能：进度显示与断点续传
结合XMLHttpRequest.upload.onprogress事件，可实时显示上传进度。
xhr.upload.onprogress = function(e) { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; console.log(`上传进度: ${percent}%`); } };
实现断点续传的关键是服务端记录已上传的块。上传前先请求服务器获取已上传的偏移列表，跳过重复上传。
基本上就这些。利用File API的切片能力和Ajax异步上传，前端能高效处理大文件，配合合理的服务端设计，可构建稳定的大文件上传系统。