ajax 上传大文件 - 深沟博客

> 使用 AJAX 上传大文件时，需要考虑以下几个问题：

- 分片上传：将大文件拆分成多个较小的文件进行上传，以避免一次性上传大文件时出现网络错误或服务端崩溃等问题。

- 断点续传：在上传过程中，如果网络中断或用户关闭浏览器，可以记录已经上传的文件分片信息，下次上传时从未上传的分片继续上传，以实现断点续传。

- 上传进度显示：可以通过 AJAX 事件监听上传进度，以实时显示上传进度。

下面是一个使用 AJAX 分片上传大文件的示例代码：

HTML：

```html
<form>
  <input type="file" id="fileInput">
  <button type="button" id="uploadButton">上传</button>
</form>
```
JavaScript：
```html
var fileInput = document.getElementById("fileInput");
var uploadButton = document.getElementById("uploadButton");
var chunkSize = 1024 * 1024; // 每个分片的大小为 1MB

uploadButton.addEventListener("click", function() {
  var file = fileInput.files[0];
  var totalSize = file.size;
  var chunks = Math.ceil(totalSize / chunkSize); // 总分片数
  var chunk = 0; // 当前上传的分片号
  var loaded = 0; // 已上传的总字节数
  var xhr = new XMLHttpRequest();
  
  xhr.upload.addEventListener("progress", function(event) {
    var progress = (loaded + event.loaded) / totalSize * 100;
    console.log("上传进度：" + progress.toFixed(2) + "%");
  });
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log("上传成功！");
    }
  };
  
  function uploadChunk() {
    var start = chunk * chunkSize;
    var end = Math.min(start + chunkSize, totalSize);
    var slice = file.slice(start, end);
    var formData = new FormData();
    formData.append("chunk", slice);
    formData.append("chunks", chunks);
    formData.append("chunkIndex", chunk);
    formData.append("filename", file.name);
    xhr.open("POST", "/upload");
    xhr.send(formData);
  }
  
  uploadChunk();
});
```
在上述代码中，首先获取文件选择框和上传按钮的 DOM 元素，然后监听上传按钮的点击事件。当上传按钮被点击时，获取文件选择框中选择的文件，计算出总分片数，并初始化当前上传的分片号、已上传的总字节数和 `XMLHttpRequest` 对象。在上传过程中，每上传一个分片就更新已上传的总字节数，并通过 AJAX 事件监听上传进度，以实时显示上传进度。当所有分片上传完成后，可以在 `AJAX` 的 `onreadystatechange` 事件中检查上传状态，如果上传成功，则显示上传成功的消息。

> 需要注意的是，在使用 AJAX 上传大文件时，需要将大文件拆分成多个较小的文件进行上传，并在每个分片上传完成后更新已上传的总字节数。同时，需要记录已上传的分片信息，以实现断点续传。在分片上传时，可以使用 `File.slice()` 方法来切割文件，并使用 `FormData` 对象将分片和其他参数一起发送到服务器端。在服务器端，需要根据请求参数来解析分片内容，并将分片合并成完整的文件。

相关推荐

近期文章