具有多个文件上传和进度条的 ng-file-upload答案

【问题标题】：ng-file-upload with multiple file upload and progress bar具有多个文件上传和进度条的 ng-file-upload
【发布时间】：2015-05-05 01:46:31
【问题描述】：

我想将多个文件上传到 Rails 服务器，并希望为每个文件显示单独的进度条。我正在使用 ng-file-upload 上传文件。文件正在上传，但它仅显示最后一个文件的进度，而不是其他文件的进度。我附上我的代码。请帮忙。

角度控制器代码：

$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);
      });
    }
  };

HTML代码：

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

【问题讨论】：

很棒的链接。它对我有帮助，谢谢！

标签： ruby-on-rails angularjs

【解决方案1】：

我无法测试以下内容，但我想我发现了问题所在。

在 JavaScript 中，变量的作用域是函数。因此，在您的 for 循环中，您在 var file = files[i]; 行中更改 file 的值。最后，for循环结束后file的值为最后一个文件。

在某些时候.progress 事件被ng-file-upload 触发以通知您有关进度（对于其中一个文件）。您更新了状态，但是，由于 file 具有最后一个文件的值，而不是您预期的值，所以最后一个文件的状态正在更新。

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

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])
}

在您的代码中可能存在与变量范围和 javascript 事件循环相关的其他问题。欲了解更多信息，请查看this。

【讨论】：