如何在 HTML 中实现分段上传文件？

在 HTML 中实现分段上传文件可以通过使用 JavaScript 中的 File API 和 XMLHttpRequest 对象来实现。具体步骤如下：

1. 创建一个文件上传表单，其中包含一个 input 标签用于选择文件：

<form id="upload-form">
  <input type="file" id="file-input">
  <button type="button" onclick="uploadFile()">上传文件</button>
</form>

2. 在 JavaScript 中获取选择的文件并进行分段：

const CHUNK_SIZE = 1024 * 1024; // 每个分段的大小，这里设置为 1MB
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0]; // 获取选择的文件
const fileSize = file.size;
let currentChunk = 0; // 当前上传的分段
let start = 0; // 当前分段的起始位置
let end = Math.min(CHUNK_SIZE, fileSize); // 当前分段的结束位置

3. 创建一个 XMLHttpRequest 对象并设置上传的 URL 和请求头：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true); // 上传的 URL
xhr.setRequestHeader('Content-Type', 'application/octet-stream'); // 请求头

4. 使用 FileReader 对象读取当前分段的数据并发送到服务器：

const reader = new FileReader();
reader.onload = function() {
  xhr.send(reader.result); // 发送数据
};
reader.readAsArrayBuffer(file.slice(start, end)); // 读取数据

5. 在上传完成后判断是否还有分段需要上传，如果有则继续上传；否则上传完成：

xhr.onload = function() {
  if (end < fileSize) {
    currentChunk++;
    start = end;
    end = Math.min(start + CHUNK_SIZE, fileSize);
    reader.readAsArrayBuffer(file.slice(start, end));
  } else {
    console.log('上传完成');
  }
};

完整的 JavaScript 代码如下所示：

const CHUNK_SIZE = 1024 * 1024; // 每个分段的大小，这里设置为 1MB
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0]; // 获取选择的文件
const fileSize = file.size;
let currentChunk = 0; // 当前上传的分段
let start = 0; // 当前分段的起始位置
let end = Math.min(CHUNK_SIZE, fileSize); // 当前分段的结束位置

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true); // 上传的 URL
xhr.setRequestHeader('Content-Type', 'application/octet-stream'); // 请求头

const reader = new FileReader();
reader.onload = function() {
  xhr.send(reader.result); // 发送数据
};
reader.readAsArrayBuffer(file.slice(start, end)); // 读取数据

xhr.onload = function() {
  if (end < fileSize) {
    currentChunk++;
    start = end;
    end = Math.min(start + CHUNK_SIZE, fileSize);
    reader.readAsArrayBuffer(file.slice(start, end));
  } else {
    console.log('上传完成');
  }
};

需要注意的是，在服务器端需要对接收到的分段数据进行合并，才能得到完整的文件。