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

Question

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

中

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

上传控制器

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

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

Progress is displayed only for the last item in the queue. ngFileUpload

javascript

angularjs

wcf

file-upload

ng-file-upload