AngularJS多文件上传进度条：错误时分段变色实现咨询

我来帮你搞定这个问题！要实现进度条分段对应文件处理的成功/失败状态，我们需要从状态跟踪逻辑和进度条渲染方式两方面调整代码，因为原生单个uib-progressbar只能设置一种颜色，所以改用多分段的进度条来匹配每个文件的处理结果。

1. 调整控制器的状态跟踪逻辑 #

首先我们需要记录每个文件的处理状态（成功/失败/待处理），而不是只跟踪总进度数值。

初始化文件状态数组 #

在开始文件夹上传时，根据总文件数初始化一个状态数组，用来记录每个文件的处理状态：

// 假设在上传流程启动时执行这段初始化代码
$rootScope.totalFiles = /* 你的总文件数量 */;
$rootScope.currentFileIndex = 0; // 当前正在处理的文件索引
$rootScope.fileProcessingStatuses = Array($rootScope.totalFiles).fill({
  status: 'pending', // 状态可选值：pending/success/error
  completed: false
});
$rootScope.progressValue = 0;
$rootScope.progressValuePercentage = 0;
$rootScope.folderProcessing = true;

更新文件处理状态 #

在文件处理结果判断的逻辑中，同步更新对应索引文件的状态：

if (docType === AppConstants.docType.RESUME) {
  const currentIndex = $rootScope.currentFileIndex;
  if(res.isProcessedSuccessfully) {
    $rootScope.fileProcessingStatuses[currentIndex].status = 'success';
    toastr.success(AppConstants.fileProcessSuccessMessage, 'File processed successfully');
  } else {
    $rootScope.fileProcessingStatuses[currentIndex].status = 'error';
    toastr.error(res.documentId, 'File Processing Failed');
  }
  // 标记该文件处理完成
  $rootScope.fileProcessingStatuses[currentIndex].completed = true;
  
  // 更新总进度和百分比
  $rootScope.progressValue += 1;
  $rootScope.progressValuePercentage = (($rootScope.progressValue * 100) / $rootScope.totalFiles).toFixed(2);
  
  // 切换到下一个文件的索引
  $rootScope.currentFileIndex += 1;
  
  // 所有文件处理完成后重置状态
  if ($rootScope.progressValue === $rootScope.totalFiles) {
    $rootScope.progressValue = 0;
    $rootScope.progressValuePercentage = 0;
    $rootScope.currentFileIndex = 0;
    // 可选：保留状态数组以便查看历史，或清空重置
    // $rootScope.fileProcessingStatuses = [];
  }
} else {
  // 非RESUME类型文件处理完成，若为批量处理请调整此处逻辑，确保所有文件处理完再关闭进度条
  $rootScope.folderProcessing = false;
  toastr.success(AppConstants.jobDescriptionSuccessMessage, 'File processed successfully');
  $scope.hideProcessSpinner = true;
}

2. 修改HTML的进度条渲染 #

改用uib-progress容器搭配多个uib-bar实现分段进度条，每个分段对应一个文件的处理状态：

<uib-progress class="progress-striped active" ng-show="folderProcessing && !isSingleFile" animate="true">
  <!-- 循环每个文件状态，生成对应进度分段 -->
  <uib-bar 
    ng-repeat="status in fileProcessingStatuses track by $index" 
    value="{{100 / totalFiles}}" 
    type="{{status.status === 'success' ? 'success' : status.status === 'error' ? 'danger' : 'info'}}">
  </uib-bar>
  <!-- 居中显示总进度百分比 -->
  <div class="progress-label" style="position:absolute; width:100%; text-align:center; line-height:20px;">
    <i><span> {{progressValuePercentage}} / 100 </span></i>
  </div>
</uib-progress>

代码说明 #

• uib-progress作为进度条容器，uib-bar是每个独立的进度分段。
• 每个uib-bar的value设置为100 / totalFiles，确保每个文件对应等宽的进度分段。
• type属性动态切换：成功用success（绿色）、失败用danger（红色）、待处理用info（蓝色）。
• 进度百分比标签通过绝对定位居中，避免被分段遮挡。

3. 收尾逻辑调整 #

如果非RESUME类型文件是批量处理的，建议调整folderProcessing的设置时机，确保所有文件处理完成后再关闭进度条，避免中途隐藏进度条。

这样调整后，每个文件处理失败时对应的进度分段会变成红色，成功的分段保持绿色，完全符合你的需求！

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