AngularJS: 동시에 업로드되는 각 파일의 상태를 추적합니다.

AngularJS: 동시에 업로드되는 각 파일의 상태를 추적합니다.

송신 버튼을 누르면, 파일 배열($scope.files1개의 파일(사용자가 원하는 수만큼)을 통해 송신할 수 있습니다.FormData그리고.XMLHttpRequest나의 각함수에서$scope.uploadFiles:

$scope.uploadFiles = function() {
    for (var i in $scope.files) {
        var form = new FormData();
        var xhr = new XMLHttpRequest;

            // Additional POST variables required by the API script
        form.append('destination', 'workspace://SpacesStore/' + $scope.currentFolderUUID);
        form.append('contenttype', 'idocs:document');
        form.append('filename', $scope.files[i].name);
        form.append('filedata', $scope.files[i]);
        form.append('overwrite', false);

        xhr.upload.onprogress = function(e) {
            // Event listener for when the file is uploading
            $scope.$apply(function() {
                var percentCompleted;
                if (e.lengthComputable) {
                    percentCompleted = Math.round(e.loaded / e.total * 100);
                    if (percentCompleted < 1) {
                                            // .uploadStatus will get rendered for the user via the template
                        $scope.files[i].uploadStatus = 'Uploading...';
                    } else if (percentCompleted == 100) {
                        $scope.files[i].uploadStatus = 'Saving...';
                    } else {
                        $scope.files[i].uploadStatus = percentCompleted + '%';
                    }
                }
            });
        };

        xhr.upload.onload = function(e) {
            // Event listener for when the file completed uploading
            $scope.$apply(function() {
                $scope.files[i].uploadStatus = 'Uploaded!'
                setTimeout(function() {
                    $scope.$apply(function() {
                        $scope.files[i].uploadStatus = '';
                    });
                }, 4000);
            });
        };

        xhr.open('POST', '/path/to/upload/script');
        xhr.send(form);
    }

}

문제는 말이다var i각 파일의 루프에 대한 첫 번째 값이 증가하고 이벤트청취자가 기동할 때까지i이미 의도된 범위를 초과하여 증가했습니다.files[i]필요한 값은 배열의 마지막 값에만 영향을 줍니다.사용하고 있다.uploadStatus사용자에게 각 개별 파일의 진행 상황을 대화식으로 보여주는 수단으로서, 따라서 나는 각 어레이 요소에 대해 개별 이벤트 리스너를 가질 필요가 있다.$scope.files. Angular에서 개별 어레이 요소의 이벤트를 할당 및 추적하려면 어떻게 해야 합니까?

갱신하다

---

두 명의 이벤트 청취자를 재작업하여 약간의 성공을 거뒀지만 여전히 이상한 행동을 경험하고 있습니다.

xhr.upload.onprogress = (function(file) {
    // Event listener for while the file is uploading
    return function(e) {
        $scope.$apply(function() {
            var percentCompleted = Math.round(e.loaded / e.total * 100);
            if (percentCompleted < 1) {
                file.uploadStatus = 'Uploading...';
            } else if (percentCompleted == 100) {
                file.uploadStatus = 'Saving...';
            } else {
                file.uploadStatus = percentCompleted + '%';
            }
        });
    }
})($scope.files[i]);

xhr.upload.onload = (function(file, index) {
    // Event listener for when the file completed uploading
    return function(e) {
        $scope.$apply(function() {
            file.uploadStatus = 'Uploaded!'
            setTimeout(function() {
                $scope.$apply(function() {
                    $scope.files.splice(index,1);
                });
            }, 2000);
        });
    }
})($scope.files[i], i);

.onprogress순조롭게 진행되고 있는 것처럼 보이지만, 약간의 변화가 있다..onloadAngular와 함께 이상한 행동을 많이 볼 수 있습니다.템플릿에 대한 JS의 양방향 바인딩.배열의 각 전자 부품에 대해$scope.files전술한 것을 사용하여 지위를 부여한다..uploadStatus소유물.저는 지금 이 시간에는setTimeout어레이에서 요소를 스플라이스하여i자기 인식 함수에 전달되는 변수입니다.이상하게도 업로드가 동시에 6개 정도의 업로드로 제한되고 있습니다.이것은 서버측의 문제일 것입니다만, 어레이 요소가 스플라이스 되고 있는 것에 의해서,ng-repeat템플릿에서 이상한 동작을 하고 있습니다.요소를 스플라이스할 필요가 있는 것은 아닙니다.또, 2000 밀리초의 임계치에 도달해도, 스플라이스 되지 않는 엔트리가 있는 경우도 자주 있습니다.

이것은 변수가 원래 문제를 떠올리게 합니다.i이벤트 리스너를 트리거하는 내내 참조되면 신뢰할 수 없는가?이제 익명의 자작극에게 전달하고 있습니다.onload스플라이스는 이 스플라이스를 사용하여 삭제할 어레이 요소를 결정하지만 올바른 어레이 요소를 반드시 제거할 필요는 없으며 어레이에 다른 요소가 남아 있는 경우가 많습니다.

그index이벤트 핸들러에 전달하면 원래 배열의 인덱스를 참조할 수 있습니다.에의 콜이 성공할 때마다splice어레이의 변경과 인덱스가 같은 것을 가리키지 않게 되었습니다.

$scope.files = ['a.jpg', 'b.jpg', 'c.jpg'];
// $scope.files[1] = 'b.jpg'

$scope.files.splice(1,1);
// $scope.files = ['a.jpg', 'c.jpg']
// $scope.files[1] = 'c.jpg'

AngularJs 1.5.5는 업로드 진행 상황을 위한 콜백 이벤트 핸들러를 제공함으로써 접근 방식을 변경합니다.

레퍼런스 - $http 또는 $resource를 사용하여 angularjs 1.5.5에서 eventHandlers 및 uploadEventHandlers를 사용하여 진척을 추적하는 방법

var uploadData = new FormData();
uploadData.append('file', obj.lfFile);
var fileData = angular.toJson({
    'FileName': obj.lfFile.name,
    'FileSize': obj.lfFile.size
});
uploadData.append('fileData', fileData)

$http({
    method: 'POST',
    url: vm.uploadPath,
    headers: {
        'Content-Type': undefined,
        'UserID': vm.folder.UserID,
        'ComputerID': vm.folder.ComputerID,
        'KeepCopyInCloud': vm.keepCopyInCloud,
        'OverWriteExistingFile': vm.overwriteExistingFile,
        'RootFileID': vm.folder.RootFileID,
        'FileName': obj.lfFile.name,
        'FileSize': obj.lfFile.size
    },
    eventHandlers: {
        progress: function(c) {
            console.log('Progress -> ' + c);
            console.log(c);
        }
    },
    uploadEventHandlers: {
        progress: function(e) {
            console.log('UploadProgress -> ' + e);
            console.log(e);
        }
    },
    data: uploadData,
    transformRequest: angular.identity
}).success(function(data) {
    console.log(data);
}).error(function(data, status) {
    console.log(data);
    console.log(status);
});

언급URL : https://stackoverflow.com/questions/13591345/angularjs-tracking-status-of-each-file-being-uploaded-simultaneously