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

仅显示队列中最后一项的进度。 ngFileUpload

1 个答案: