原生JS实现文件上传和监视上传进度

封面图 • 2025-09-17 • JavaScript

使用原生 JavaScript 实现文件上传并监视上传进度，可以通过 `XMLHttpRequest` 或 `fetch` API 来实现。不过需要注意的是，`fetch` 不支持直接监听上传进度（因为它是基于 `Promise` 的），而 `XMLHttpRequest` 支持 `onprogress` 事件来监控上传进度。

下面是一个完整的示例，展示如何使用原生 JavaScript 实现：

---

### ✅ 功能说明

- 用户选择一个或多个文件；
- 使用 `XMLHttpRequest` 发送文件到服务器；
- 监听上传进度（百分比）；
- 显示上传进度信息。

---

### 📄 HTML + JavaScript 示例代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>原生JS文件上传</title>
</head>
<body>

if (files.length === 0) {
        alert("请选择要上传的文件！");
        return;
      }

for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const formData = new FormData();
        formData.append('file', file);

const xhr = new XMLHttpRequest();

// 设置上传路径（根据你的后端接口修改）
        xhr.open('POST', '/upload', true);

// 监听上传进度
        xhr.upload.onprogress = function (event) {
          if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            const progressDiv = document.createElement('div');
            progressDiv.textContent = `文件 ${file.name} 上传进度: ${percentComplete.toFixed(2)}%`;
            progressContainer.appendChild(progressDiv);
          }
        };

// 上传完成
        xhr.onload = function () {
          if (xhr.status === 200) {
            console.log('上传成功:', xhr.responseText);
            alert('文件上传成功！');
          } else {
            console.error('上传失败:', xhr.statusText);
            alert('文件上传失败，请重试。');
          }
        };

// 发送请求
        xhr.send(formData);
      }
    }
  </script>

</body>
</html>
```

---

### 🔍 说明

- `FormData` 用于构造表单数据，可以包含文件。
- `XMLHttpRequest` 的 `upload.onprogress` 事件可以监听上传进度。
- `event.loaded` 是已上传的字节数，`event.total` 是总字节数。
- 你可以将 `/upload` 替换为你的实际后端接口地址。

---

### ⚠️ 注意事项

- 如果你使用的是 Node.js、PHP、Java 等后端，需要确保后端能接收 `multipart/form-data` 格式的文件。
- 对于大文件上传，建议分片上传（如使用 `File API` 和 `Blob` 分块上传）。
- 原生 JS 没有内置的断点续传功能，需要自己实现。

---

如果你需要更高级的功能（如拖拽上传、多文件并发上传、取消上传等），也可以继续扩展这个例子。

是否需要我提供一个使用 `fetch` 的版本？或者想添加断点续传功能？