javascript - 仅显示队列中最后一项的进度。 ng文件上传

Question

我正在使用 AngularJS (1.2.28) 和 ng-file-upload directive (7.0.17)。后端有一个托管在 IIS 7 中的 WCF 服务。

我正在尝试为每个上传的文件显示进度条，这是我的代码:

uploadsController

controller('uploadsController', ['$scope', 'Upload', function($scope, Upload) {
    $scope.upload = [];

    $scope.select = function(files) {
        for(var i = 0; i < $scope.files.length; i++) {
            files[i].progress = 0;
        }
    }

    $scope.submit = function() {
        for(var i = 0; i < $scope.files.length; i++) {
            var $file = $scope.files[i];
            (function(index) {
                $scope.upload[index] = Upload.upload({
                url: "/documents-manager/UploadsService.svc/upload", 
                    method: "POST",
                    file: $file
                }).progress(function(evt) {
                    $file.progress = parseInt(100.0 * evt.loaded / evt.total);
                });
            })(i);
        }
    }
}

相应标记

<div ngf-select="select($files)" ng-model="files" ngf-multiple="true">search</div>

<tbody>
    <tr ng-repeat="file in files">
        <td>
            <div>{{ file.name }}</div>
            <div class="progress">
                <span class="meter" style="width:{{ file.progress }}%;"</span>
            </div>
        </td>
    </tr>
</tbody>

问题

仅显示队列中最后一个文件的进度。怎么了？

Answer 1

您用来设置进度的 $file 变量正在被最后一个文件覆盖，这就是您看到最后一个文件的进度的原因。使用索引来访问正确的文件:

    for(var i = 0; i < $scope.files.length; i++) {
        var $file = $scope.files[i];
        (function(index) {
            $scope.upload[index] = Upload.upload({
            url: "/documents-manager/UploadsService.svc/upload", 
                method: "POST",
                file: $file
            }).progress(function(evt) {
                $scope.files[index].progress = parseInt(100.0 * evt.loaded / evt.total);
            });
        })(i);
    }