多文件上传：单个文件进度跟踪及单独上传的技术疑问

当然可以搞定这些问题！咱们逐个来聊：

1. 能不能跟踪每个单独文件的上传进度？ #

完全可以，但得看你的上传方式：

• 如果为每个文件发起独立的上传请求，就能精准跟踪单个文件的上传进度；
• 如果把多个文件打包进同一个请求（比如一个FormData里塞多个文件），那浏览器只能返回总上传进度，没法拆分到单个文件。

2. 浏览器是否提供单个文件的上传进度信息？ #

是的！当你为单个文件发起上传请求时，浏览器的ProgressEvent会返回该文件的loaded（已上传字节数）和total（文件总字节数），用这两个值就能轻松计算出单个文件的上传百分比。

3. 能不能从输入框提取File对象，为每个文件单独上传？ #

没问题！虽然input.files数组是只读的（出于安全限制，不能修改这个数组的内容），但读取数组里的每个File对象是完全允许的——你根本不需要创建新的input框，直接遍历input.files，把每个File对象单独塞进FormData里发起请求就行。

举个简单的代码示例：

// 获取多文件上传的input元素
const fileInput = document.querySelector('input[type="file"][multiple]');

fileInput.addEventListener('change', (e) => {
  // 把FileList转成数组方便遍历
  const files = Array.from(e.target.files);
  
  files.forEach((file, index) => {
    // 为每个文件创建单独的FormData
    const formData = new FormData();
    formData.append('uploadedFile', file);
    
    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/your-upload-api-endpoint');
    
    // 监听上传进度事件
    xhr.upload.addEventListener('progress', (progressEvent) => {
      if (progressEvent.lengthComputable) {
        const uploadPercent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
        console.log(`第${index+1}个文件「${file.name}」上传进度：${uploadPercent}%`);
        // 这里可以把进度更新到页面上，比如对应文件的进度条
      }
    });
    
    // 发送请求
    xhr.send(formData);
  });
});

简单来说，安全限制只是不让我们篡改input.files数组的内容，但完全不影响我们读取和使用里面的File对象来单独上传。

内容的提问来源于stack exchange，提问作者Hrvoje Batrnek