ajax分片上传jquery代码示例

以下是一个使用jQuery实现的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 = $('#file-input');
const file = fileInput[0].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请求
  $.ajax({
    url: '/upload', // 修改为服务器的上传接口
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      // 处理上传结果
      response = JSON.parse(response);
      if (response.success) {
        // 上传成功，继续上传下一分块
        if (chunkIndex < totalChunks - 1) {
          uploadChunk(chunkIndex + 1);
        } else {
          // 所有分块上传完成，进行最终合并操作
          mergeChunks();
        }
      } else {
        // 上传失败，进行相应处理
        console.error(response.message);
      }
    },
    error: function(xhr, status, error) {
      // 处理上传错误
      console.error(error);
    }
  });
}

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

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

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