js 大文件上传和断点续传 js上传文件大小限制

大文件上传和断点续传是一种解决网页上传大文件时遇到的问题的方案。以下是一个简单实现大文件上传和断点续传的 JavaScript 代码示例：

javascriptCopy code// 初始化上传
function uploadFile(file) {
  const chunkSize = 1024 * 1024 * 2; // 分片大小，每个分片2MB
  const fileSize = file.size; // 文件大小
  const chunkNum = Math.ceil(fileSize / chunkSize); // 分片数量
  let uploadedSize = 0; // 已上传大小
  let chunks = []; // 分片列表
  // 上传分片
  function uploadChunks() {
    if (chunks.length === chunkNum) {
      // 所有分片上传完成，合并分片
      mergeChunks();
      return;
    }
    const start = chunks.length * chunkSize; // 分片起始位置
    const end = Math.min(start + chunkSize, fileSize); // 分片结束位置
    const chunk = file.slice(start, end); // 获取分片
    const fd = new FormData(); // 创建表单数据
    fd.append('chunk', chunk);
    fd.append('chunkNum', chunks.length + 1);
    fd.append('fileName', file.name);
    fd.append('fileSize', fileSize);
    const xhr = new XMLHttpRequest(); // 创建 AJAX 请求
    xhr.open('POST', 'upload.php', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        if (res.code === 0) {
          uploadedSize += chunk.size;
          chunks.push(res.data);
          // 更新上传进度
          const progress = uploadedSize / fileSize;
          updateProgress(progress);
          // 继续上传下一个分片
          uploadChunks();
        }
      }
    };
    xhr.send(fd);
  }
  // 合并分片
  function mergeChunks() {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'merge.php', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const res = JSON.parse(xhr.responseText);
        if (res.code === 0) {
          // 上传完成
          const url = res.data;
          uploadSuccess(url);
        }
      }
    };
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify({
      fileName: file.name,
      fileSize: fileSize,
      chunks: chunks
    }));
  }
  // 更新上传进度
  function updateProgress(progress) {
    // 更新进度条等UI
  }
  // 上传成功
  function uploadSuccess(url) {
    // 处理上传成功后的逻辑
  }
  // 开始上传
  uploadChunks();
}

上面的代码中，uploadFile 函数会先根据文件大小和分片大小计算出分片数量，然后依次上传每个分片，并记录已上传分片的信息。当所有分片上传完成后，会调用 mergeChunks 函数将分片合并，并传递文件名、文件大小和分片信息给后端进行合并操作。最后，如果合并成功，就会调用 uploadSuccess 函数进行上传成功后的处理。 需要注意的是，上面的代码只是一个简单的示例，实际情况下还需要处理一些异常情况，如分片上传失败、合并失败等。