Javascript AngularJS:跟踪同时上载的每个文件的状态
按下submit按钮后,通过my angular function中的Javascript AngularJS:跟踪同时上载的每个文件的状态,javascript,angularjs,Javascript,Angularjs,按下submit按钮后,通过my angular function中的FormData和XMLHttpRequest提交一组文件($scope.files,可以是一个文件,用户可以想要多少文件): $scope.uploadFiles = function() { for (var i in $scope.files) { var form = new FormData(); var xhr = new XMLHttpRequest;
FormData
和XMLHttpRequest
提交一组文件($scope.files
,可以是一个文件,用户可以想要多少文件):
$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);
}
}
.onprogress
似乎进展顺利,但对.onload
做了一些小改动,我现在看到AngularJS的模板双向绑定出现了很多奇怪的行为。对于数组$scope.files
中的每个元素,使用前面提到的.uploadStatus
属性给出一个状态。现在我让setTimeout
通过传递给自执行函数的I
变量拼接数组中的元素。奇怪的是,一次上传大约6次,这一定是服务器端的问题,但我注意到,当数组元素被拼接时,模板中的ng repeat
将拼接元素,而不一定是它应该拼接的元素。我还注意到,在达到2000毫秒阈值后,经常会有一些条目无法拼接
这让人想起最初的问题,即变量
i
在整个事件侦听器触发过程中引用时不可靠?现在我将它传递给匿名自执行.onload
函数,拼接使用它来确定应该删除哪个数组元素,但它不一定要删除正确的数组元素,当数组应该删除其他元素时,通常会将它们留在数组中。传递给事件处理程序的索引引用原始数组中的索引。每次成功调用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通过为上传进度提供回调事件处理程序改变了方法
参考-
我不知道如何解决您的问题,但这是一个使用Angular为文件上传使用XHR代码的极好示例。Upvote为您投票。如何在html中使用UploadProgress详细信息。我在factory.eventHandlers和uploadEventHandlers中使用了上述代码,但从v1.5.10 github.com/angular/angular.js/issues/14436起,这些代码无法正常工作
$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'
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);
});