PHP应用实现Bootstrap模态框进度条展示数据处理百分比

嘿，这个需求我太熟了！普通表单提交确实没法搞实时进度，因为一提交页面就等着刷新了，根本没机会中途更新进度条。得换异步提交+后端实时反馈进度的路子，给你一套能直接落地的方案：

1. 放弃传统表单同步提交，改用AJAX异步上传数据，这样页面不会刷新，能一直和后端交互
2. 后端处理数据时，把实时进度存在Session（或缓存）里
3. 前端通过定时轮询（或SSE主动推送）获取进度，更新Bootstrap模态框里的进度条

1. 前端改造：表单+模态框+AJAX提交 #

先把表单和Bootstrap模态框的结构写好，然后用JS阻止默认提交，改用异步上传并轮询进度：

<!-- Bootstrap进度模态框 -->
<div class="modal fade" id="progressModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">数据处理中，请稍候...</h5>
      </div>
      <div class="modal-body">
        <div class="progress mb-3">
          <div class="progress-bar" id="progressBar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <p class="text-center" id="progressText">0% 完成</p>
      </div>
    </div>
  </div>
</div>

<!-- 批量上传表单 -->
<form id="batchUploadForm" enctype="multipart/form-data">
  <div class="mb-3">
    <label for="batchFile" class="form-label">选择批量数据文件</label>
    <input class="form-control" type="file" id="batchFile" name="batchFile" accept=".csv,.xlsx">
  </div>
  <button type="submit" class="btn btn-primary">开始处理</button>
</form>

对应的JS代码（用jQuery，你也可以改成原生JS）：

$('#batchUploadForm').submit(function(e) {
  e.preventDefault(); // 阻止默认表单刷新
  const $modal = $('#progressModal');
  $modal.modal('show'); // 打开进度模态框

  // 构造FormData对象，包含表单所有数据
  const formData = new FormData(this);
  let progressInterval;

  // 第一步：异步发起数据处理请求
  $.ajax({
    url: './path/to/your-function-file.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    async: true,
    success: function(res) {
      $modal.modal('hide');
      clearInterval(progressInterval);
      // 这里可以展示处理结果，比如弹出提示或渲染到页面
      alert(`处理完成！共处理${res.total}条数据，成功${res.success}条`);
    },
    error: function() {
      $modal.modal('hide');
      clearInterval(progressInterval);
      alert('处理出错，请检查数据后重试');
    }
  });

  // 第二步：定时轮询进度（每500ms查一次）
  progressInterval = setInterval(() => {
    $.get('./path/to/get-progress.php', function(progress) {
      const currentProgress = parseInt(progress);
      // 更新进度条和文本
      $('#progressBar').css('width', `${currentProgress}%`).attr('aria-valuenow', currentProgress);
      $('#progressText').text(`${currentProgress}% 完成`);

      // 进度到100%时停止轮询
      if (currentProgress >= 100) {
        clearInterval(progressInterval);
      }
    });
  }, 500);
});

2. 后端处理函数：实时更新进度 #

在你的函数处理文件里，要开启Session存储进度，每处理一部分数据就更新一次进度值：

<?php
session_start();
// 初始化进度为0
$_SESSION['process_progress'] = 0;

// 获取上传的文件（假设是CSV/Excel）
$uploadedFile = $_FILES['batchFile'];
// 这里换成你获取总数据量的逻辑，比如读取Excel行数
$totalRows = getTotalRowsFromFile($uploadedFile['tmp_name']);
$processedRows = 0;

// 循环处理每条数据
foreach ($dataRows as $row) {
  // 你的业务处理逻辑：比如插入数据库、验证数据等
  processSingleRow($row);
  
  $processedRows++;
  // 计算当前进度百分比
  $progress = round(($processedRows / $totalRows) * 100);
  $_SESSION['process_progress'] = $progress;
  
  // 关键：强制写入Session，不然前端读不到最新值
  session_write_close();
  session_start();
}

// 处理完成后设置进度为100
$_SESSION['process_progress'] = 100;
session_write_close();

// 返回处理结果
echo json_encode([
  'total' => $totalRows,
  'success' => $processedRows
]);

// 模拟获取总数据行数的函数
function getTotalRowsFromFile($filePath) {
  // 实际项目里换成读取Excel/CSV的逻辑
  return 100;
}

// 模拟单条数据处理函数
function processSingleRow($row) {
  // 你的业务逻辑
  usleep(50000); // 模拟处理耗时（50ms）
}
?>

3. 进度查询接口 #

专门写一个简单的PHP文件，用来返回当前的处理进度：

<?php
session_start();
// 返回当前进度，默认0
echo $_SESSION['process_progress'] ?? 0;
?>

• 如果数据量极大，用Session可能有性能瓶颈，可以换成Redis/Memcached存储进度
• 轮询可以优化：比如进度低于50%时每500ms查一次，高于80%时改成每200ms查一次，减少请求量
• 可以用**Server-Sent Events（SSE）**代替轮询，后端主动推送进度，更高效（适合长耗时任务）
• Bootstrap进度条可以加动态效果，比如添加progress-bar-animated类实现动画

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