ajax分片上传代码示例

以下是一个简单的Ajax分片上传代码示例：

HTML部分：

<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="file" id="file-input">
  <button type="button" id="upload-btn">上传</button>
</form>

JavaScript部分：

// 定义分块大小
const chunkSize = 1 * 1024 * 1024; // 1MB

// 获取上传文件
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];

// 计算文件总分块数
const totalChunks = Math.ceil(file.size / chunkSize);

// 定义上传函数
function uploadChunk(chunkIndex) {
  // 计算当前分块的起始位置和结束位置
  const start = chunkIndex * chunkSize;
  const end = Math.min(start + chunkSize, file.size);

  // 创建FormData对象
  const formData = new FormData();
  formData.append('file', file.slice(start, end)); // 添加分块数据
  formData.append('chunkIndex', chunkIndex); // 添加分块索引
  formData.append('totalChunks', totalChunks); // 添加总分块数

  // 发送Ajax请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload'); // 修改为服务器的上传接口
  xhr.onload = function() {
    // 处理上传结果
    const response = JSON.parse(xhr.responseText);
    if (response.success) {
      // 上传成功，继续上传下一分块
      if (chunkIndex < totalChunks - 1) {
        uploadChunk(chunkIndex + 1);
      } else {
        // 所有分块上传完成，进行最终合并操作
        mergeChunks();
      }
    } else {
      // 上传失败，进行相应处理
      console.error(response.message);
    }
  };
  xhr.send(formData);
}

// 定义合并函数
function mergeChunks() {
  // 发送合并请求
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/merge'); // 修改为服务器的合并接口
  xhr.onload = function() {
    // 处理合并结果
    const response = JSON.parse(xhr.responseText);
    if (response.success) {
      // 合并成功，进行相应处理
      console.log('上传成功！');
    } else {
      // 合并失败，进行相应处理
      console.error(response.message);
    }
  };
  xhr.send();
}

// 绑定上传按钮事件
const uploadBtn = document.getElementById('upload-btn');
uploadBtn.addEventListener('click', function() {
  // 开始上传第一个分块
  uploadChunk(0);
});

以上代码仅作为示例，实际使用时需要根据具体需求进行修改。同时也需要在服务器端实现相应的上传接口和合并接口。