文件上传进度条达100%后点击保存弹窗不显示问题求助

问题排查 #

1. 核心逻辑缺陷 #

你当前的makeProgress函数仅在i < 100时执行内部逻辑，每次调用i仅累加1。如果没有外部循环/递归调用这个函数的逻辑，需要主动调用100次才能让i达到100触发弹窗，调用次数不够的话永远走不到弹窗分支。

2. 上传完成条件写死 #

你用fileno == 9作为全部文件上传完成的判断依据，相当于默认总文件数是10。如果实际上传的文件数量不等于10，这个条件永远不会成立，后续弹窗逻辑自然不会执行。

3. 变量作用域风险 #

代码中没有展示i的定义位置，如果i是全局变量，多个上传任务共享i会导致计数混乱，可能出现i还没累加到100就被其他任务重置的情况。

4. 框架上下文兼容问题 #

你用了AngularJS的factory服务，直接使用原生setTimeout不会触发Angular的脏检查，虽然不会影响alert弹出，但后续的$window.location.href跳转可能存在上下文失效的问题。

修复代码示例 #

// 将i改为factory内部私有变量，避免全局污染
let i = 0;
factory.makeProgress = function(id, fileno, totalFiles) {
  if (i < 100) {
    i = i + 1;
    $(id).css("width", i + "%").text(i + "%");
    console.log("Run makeprogress", fileno);
    // 把固定的fileno==9改为动态判断是否为最后一个文件
    if (fileno === totalFiles - 1) {
      if (i === 100) {
        console.log("i must be 100:", i);
        // 用Angular内置的$timeout替代原生setTimeout，保证上下文正确，记得先注入$timeout依赖
        $timeout(function() {
          alert("应用已成功提交");
          $window.location.href = "application";
          // 进度完成后重置i，方便下次上传使用
          i = 0;
        }, 1000);
        // 达到100后终止递归
        return;
      }
    }
    // 新增递归调用逻辑，自动累加进度，间隔时间可根据实际需求调整
    setTimeout(() => {
      factory.makeProgress(id, fileno, totalFiles);
    }, 10);
  }
}

优化建议 #

建议把进度条的累加逻辑和实际文件上传进度绑定，不要用固定速率累加的方式，避免出现文件上传完成但进度条还没走完，或者进度条走完了文件还没上传完成的不一致问题。

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