Ruby on rails ng文件上载，带有多个文件上载和进度条

我想将多个文件上传到rails服务器，并为每个文件显示单独的进度条。我使用ng文件上传上传文件。正在上载文件，但它只显示最后一个文件的进度，而不显示其他文件的进度。我正在附加我的代码。请帮忙

角度控制器代码：

$scope.upload_file = function() {

    var files = $scope.files;
    var uploadUrl = base_url+"/upload_image";
    var job_id = $scope.directive.id;
    if(current_user.role == "third_party_vendor" || current_user.role == "employee")
    {
        var source = current_user.user_login+"-"+current_user.role;   
    }
    else
    {
        var source = $scope.dataObj.source["user_login"]+"-"+$scope.dataObj.source["role"];
    }

    if(job_id === "" || job_id === undefined || files === undefined || files === ""){
        error_notification("Please select a job and a file.");
        return;
    }
    hideLoader();
    $("#upload_resume_queue").modal('show');

    var formData = new Array();
    formData['job_id'] = job_id;
    formData['context'] = "inside_page";
    formData['source'] = source;

    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      console.log(file.name);
      $scope.upload = $upload.upload({
        url: uploadUrl, 
        data:{myObj: formData},
        file: file, 
      }).progress(function(evt) {
        //console.log('percent: ' +parseInt(100.0 * evt.loaded / evt.total));


                file.progress = Math.round(evt.loaded * 100 / evt.total)


      }).success(function(responseText) {
        hideLoader();
        try{
            var response = responseText;
        }catch(e){
            error_notification("Invalid Excel file Imported.");
            return;
        }
        if(response.status==='wrong_content_type')
            error_notification("Please upload a valid file format.",0);
        if(response.status==='job_application_present'){
            $scope.duplicate = true;
            $scope.jobID = job_id;
            $scope.user_id = response.user_id;
            $scope.application_id = response.application_id;
            //showModal('#duplicate_application_modal');
            error_notification("Job Application already present for this user and job.",0);
        }
        if(response.status==='invalid_email')
            error_notification("The email in the resume is an invalid one.",0);
        if(response.status==='success')
            success_notification("The uploaded resume has been parsed.",0);
      });
    }
  };

$scope.upload\u file=function（）{
var files=$scope.files；
var uploadUrl=base_url+“/upload_image”；
var job_id=$scope.directive.id；
如果（当前用户角色==“第三方供应商”| |当前用户角色==“员工”）
{
var source=当前用户。用户登录名+“-”+当前用户。角色；
}
其他的
{
var source=$scope.dataObj.source[“用户登录”]+“-”+$scope.dataObj.source[“角色”]；
}
如果（作业id==“”| |作业id===未定义的| |文件===未定义的| |文件==“”）{
错误通知（“请选择作业和文件”）；
返回；
}
hideLoader（）；
$（“#上传#恢复#队列”）.modal（'show'）；
var formData=新数组（）；
formData['job_id']=job_id；
formData['context']=“内部页面”；
formData['source']=源；
对于（var i=0；i

Html代码：

<input type="file" class="required file_browse" ng-file-select="" ng-model="files" multiple />

我无法测试以下内容，但我想我找到了问题所在

在JavaScript中，变量的作用域是函数。因此，在for循环中更改

var file=files[i]中
file
的值行。最后，
for
循环完成后，
file
的值是最后一个文件

在某个时刻，
ng file upload
会触发
.progress
事件，通知您（其中一个文件）的进度。然后更新状态，但由于
文件
具有最后一个文件的值，而不是您期望的值，因此最后一个文件的状态正在更新

这就是为什么只更新了最后一个文件。要解决此问题，您需要为每个
进度
事件访问正确的
文件
。为此，可以使用匿名函数保留
文件
变量

for (var i = 0; i < files.length; i++) {
  (function(file) {
    console.log(file.name);
    $scope.upload = $upload.upload({
      url: uploadUrl, 
      data:{myObj: formData},
      file: file, 
    }).progress(function(evt) {
      //console.log('percent: ' +parseInt(100.0 * evt.loaded / evt.total));
      file.progress = Math.round(evt.loaded * 100 / evt.total)
    }).success(function(responseText) {
      // the other stuff
    });
  })(files[i])
}

for（var i=0；i

在您的代码中，可能存在与变量作用域和javascript事件循环相关的其他问题。有关更多信息，请查看。
精彩链接。这对我很有帮助，谢谢你！