通过浏览器实现断点续传的代码

以下是通过浏览器实现断点续传的示例代码：

// 定义全局变量
var file = null;
var startByte = 0;
var endByte = null;
var fileSize = null;
var chunkSize = 1024 * 1024; // 每次上传的文件块大小为1MB
var chunks = null;
var chunkIndex = 0;
var xhr = null;

// 初始化上传
function initUpload() {
  // 获取文件对象
  file = document.getElementById("fileInput").files[0];
  fileSize = file.size;
  chunks = Math.ceil(fileSize / chunkSize);
  console.log("Total chunks: " + chunks);

  // 初始化上传请求
  xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload", true);
  xhr.setRequestHeader("Content-Type", "application/octet-stream");
  xhr.setRequestHeader("X-File-Name", file.name);
  xhr.setRequestHeader("X-File-Size", fileSize);
  xhr.setRequestHeader("X-File-Type", file.type);

  // 设置上传进度回调函数
  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / fileSize) * 100;
      console.log("Upload progress: " + percentComplete.toFixed(2) + "%");
    }
  };

  // 发送上传请求
  sendChunk();
}

// 发送文件块
function sendChunk() {
  // 计算文件块的起始和结束位置
  startByte = chunkIndex * chunkSize;
  endByte = Math.min(startByte + chunkSize, fileSize);

  // 创建文件块的Blob对象
  var blob = file.slice(startByte, endByte);

  // 发送文件块
  xhr.send(blob);
}

// 处理上传完成事件
xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE) {
    if (xhr.status == 200) {
      console.log("Chunk " + (chunkIndex + 1) + " uploaded successfully.");
      chunkIndex++;

      // 如果还有文件块未上传，则继续上传
      if (chunkIndex < chunks) {
        sendChunk();
      } else {
        console.log("File uploaded successfully.");
      }
    } else {
      console.log("Error uploading chunk " + (chunkIndex + 1) + ".");
    }
  }
};

该示例代码实现了通过浏览器实现断点续传的功能，将大文件分成多个文件块进行上传，如果上传中断，可以从上次中断的位置继续上传。在初始化上传时，先获取文件对象，然后计算出文件块的数量和每个文件块的大小，然后初始化上传请求，并设置上传进度回调函数。在发送文件块时，计算出文件块的起始和结束位置，然后创建文件块的Blob对象，发送文件块。在处理上传完成事件时，判断上传是否成功，如果成功，将文件块索引加1，如果还有文件块未上传，则继续上传，否则上传完成。