如何在JS双重循环及AJAX上传场景中更新HTML进度条？

嘿，我来帮你搞定这两个进度条的问题！

你的基础HTML结构已经没问题了，只需要在上传逻辑里加上上传进度监听，就能让进度条动起来。

1. 完善HTML（给进度条加基础样式） #

先给进度条加一点基础样式，让它看起来更直观：

<input type="file" multiple="multiple" id="file_upload" /> <br />
<input type="button" id="upload" name="upload" value="Upload" class="btn btn-primary btn-block" /> <br />
<div class="outter" style="width: 100%; height: 20px; background: #eee; border-radius: 10px; margin-top: 10px;">
  <div class="inner" id="progress" style="width: 0%; height: 100%; background: #2196F3; border-radius: 10px; transition: width 0.3s ease;"></div>
</div>

2. JavaScript上传逻辑+进度监听 #

这里用原生XMLHttpRequest来实现，因为它能直接监听上传进度（jQuery默认的AJAX配置需要额外配置才能支持）：

document.getElementById('upload').addEventListener('click', function() {
  const fileInput = document.getElementById('file_upload');
  const files = fileInput.files;
  
  if (files.length === 0) {
    alert('请选择要上传的图片！');
    return;
  }

  // 构建FormData对象，用于传递文件
  const formData = new FormData();
  for (let i = 0; i < files.length; i++) {
    formData.append('uploadFiles', files[i]);
  }

  const xhr = new XMLHttpRequest();
  
  // 关键：监听上传进度事件
  xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
      // 计算已上传的百分比
      const progressPercent = (e.loaded / e.total) * 100;
      // 更新进度条宽度
      document.getElementById('progress').style.width = `${progressPercent}%`;
    }
  });

  // 上传完成后的回调
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('图片上传成功！');
      // 重置进度条
      document.getElementById('progress').style.width = '0%';
      fileInput.value = ''; // 清空文件选择框
    } else {
      alert('上传失败，请重试！');
      document.getElementById('progress').style.width = '0%';
    }
  };

  // 配置请求并发送
  xhr.open('POST', '/YourController/UploadImages', true);
  xhr.send(formData);
});

3. ASP.NET MVC控制器代码 #

对应的后端控制器接收文件的逻辑示例：

public class YourController : Controller
{
    [HttpPost]
    public async Task<IActionResult> UploadImages(List<IFormFile> uploadFiles)
    {
        if (uploadFiles == null || uploadFiles.Count == 0)
        {
            return BadRequest("未选择任何文件");
        }

        // 定义文件保存路径（示例：wwwroot下的uploads文件夹）
        var savePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
        if (!Directory.Exists(savePath))
        {
            Directory.CreateDirectory(savePath);
        }

        foreach (var file in uploadFiles)
        {
            if (file.Length > 0)
            {
                var filePath = Path.Combine(savePath, file.FileName);
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
            }
        }

        return Ok("所有文件上传完成");
    }
}

这里要注意一个坑：JavaScript是单线程的，如果直接在双重循环里修改DOM，浏览器会阻塞到整个循环结束才会渲染DOM，导致进度条看起来是一下子跳满的，不会逐步更新。

解决办法是把循环拆分成异步小块，给浏览器留出渲染时间。

示例代码 #

假设我们要处理一个100×10的双重循环，实时更新进度：

<div class="outter" style="width: 100%; height: 20px; background: #eee; border-radius: 10px; margin-top: 10px;">
  <div class="inner" id="loopProgress" style="width: 0%; height: 100%; background: #4CAF50; border-radius: 10px; transition: width 0.3s ease;"></div>
</div>
<button id="startLoop">启动循环任务</button>

document.getElementById('startLoop').addEventListener('click', function() {
  const outerTotal = 100; // 外层循环次数
  const innerTotal = 10;  // 内层循环次数
  const totalTasks = outerTotal * innerTotal; // 总任务数
  let completedTasks = 0;

  // 用递归异步处理外层循环
  function processOuterLoop(outerIndex) {
    // 循环结束条件
    if (outerIndex >= outerTotal) {
      alert("所有任务处理完成！");
      return;
    }

    // 处理当前外层的所有内层任务
    for (let innerIndex = 0; innerIndex < innerTotal; innerIndex++) {
      // 这里写你的业务逻辑，比如处理数据、计算等
      // 示例：模拟耗时操作
      let temp = 0;
      for (let k = 0; k < 10000; k++) {
        temp += k;
      }

      completedTasks++;
    }

    // 更新进度条
    const progressPercent = (completedTasks / totalTasks) * 100;
    document.getElementById('loopProgress').style.width = `${progressPercent}%`;

    // 异步调用下一次外层循环，让浏览器有时间渲染DOM
    requestAnimationFrame(() => processOuterLoop(outerIndex + 1));
  }

  // 启动第一个外层循环
  processOuterLoop(0);
});

原理说明 #

• 用requestAnimationFrame（或setTimeout）把每次外层循环的执行放到浏览器的渲染队列里，这样每次处理完一个外层循环后，浏览器会先更新DOM，再执行下一次循环。
• 如果你的任务量极大，还可以把内层循环也拆分成小块，比如每次只处理5个内层任务，进一步提升进度条的平滑度。

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