HTML5代码如何实现分块上传 HTML5代码中File API的大文件处理-html教程-PHP中文网

HTML5代码如何实现分块上传 HTML5代码中File API的大文件处理

雪夜

发布： 2025-10-22 18:47:01

原创

1022人浏览过

首先利用File API的slice方法将大文件切分为多个小块，再通过Blob对象逐个上传分块，实现稳定、支持断点续传的大文件上传机制。

html5代码如何实现分块上传 html5代码中file api的大文件处理

在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异步上传，前端能高效处理大文件，配合合理的服务端设计，可构建稳定的大文件上传系统。

以上就是HTML5代码如何实现分块上传 HTML5代码中File API的大文件处理的详细内容，更多请关注php中文网其它相关文章！