当前位置：首页 > JavaScript

js实现批量上传

2026-01-30 10:26:10JavaScript

js实现批量上传的方法

使用HTML5的File API配合FormData对象可以实现前端批量上传文件。现代浏览器支持多文件选择和异步上传。

基本实现步骤

创建包含multiple属性的文件输入框：

<input type="file" id="fileInput" multiple>

获取文件列表并构建FormData：

const fileInput = document.getElementById('fileInput');
const formData = new FormData();

fileInput.addEventListener('change', (e) => {
  const files = e.target.files;
  for(let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i]);
  }
});

使用fetch或XMLHttpRequest发送请求：

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

进度显示实现

XMLHttpRequest可以监听上传进度：

const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  if(e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${percent}%`);
  }
});
xhr.open('POST', '/upload');
xhr.send(formData);

分片上传方案

大文件可分片上传提高可靠性：

js实现批量上传

const chunkSize = 1024 * 1024; // 1MB
for(let i = 0; i < files.length; i++) {
  const file = files[i];
  let offset = 0;

  while(offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const chunkFormData = new FormData();
    chunkFormData.append('chunk', chunk);
    chunkFormData.append('name', file.name);
    chunkFormData.append('index', offset / chunkSize);

    await fetch('/upload-chunk', {
      method: 'POST',
      body: chunkFormData
    });

    offset += chunkSize;
  }
}

第三方库推荐

Dropzone.js - 提供拖拽上传和预览功能
Uppy - 功能丰富的文件上传库，支持多种源
Resumable.js - 实现断点续传功能

注意事项

服务器需支持多文件接收处理
设置合适的请求超时时间
考虑文件类型和大小限制
实现文件上传前的预览和验证
处理并发上传时的性能问题

完整示例代码

<input type="file" id="fileInput" multiple>
<div id="progress"></div>

<script>
document.getElementById('fileInput').addEventListener('change', uploadFiles);

async function uploadFiles(e) {
  const files = e.target.files;
  const progress = document.getElementById('progress');

  for(let file of files) {
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
        headers: {
          'X-File-Name': encodeURIComponent(file.name)
        }
      });

      const result = await response.json();
      progress.innerHTML += `${file.name} 上传成功<br>`;
    } catch(err) {
      progress.innerHTML += `${file.name} 上传失败: ${err.message}<br>`;
    }
  }
}
</script>