Javascript 如何使用angularjs显示文件上载的进度条
我正在使用这个指令Javascript 如何使用angularjs显示文件上载的进度条,javascript,angularjs,file-upload,Javascript,Angularjs,File Upload,我正在使用这个指令 myApp.directive('fileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign;
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
console.log(modelSetter)
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
我的服务是
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
在我的控制器中
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl);
};
我的问题是如何在将图像上传到url时显示进度条我的JSFIDLE url试试这段代码,对我来说效果不错
this.uploadFileToUrl = function (file, uploadUrl, progressCB) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined },
uploadEventHandlers: {
progress: progressCB
}
})
.success(function () {
})
.error(function () {
});
}
$scope.uploadFile = function () {
var file = $scope.myFile;
console.log('file is ');
console.dir(file);
var uploadUrl = "/fileUpload";
fileUpload.uploadFileToUrl(file, uploadUrl, , function (e) {
if (e.lengthComputable) {
var progressBar = (e.loaded / e.total) * 100;
console.log(progressBar);
//here you will get progress, you can use this to show progress
}
});
};
我想说的是,我所展示的。使用此指令。它内置了这些功能
$scope.upload = function (file) {
Upload.upload({
url: 'upload/url',
data: {file: file, 'username': $scope.username}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
请参阅演示尝试使用
获取类型错误a不是一个函数
TypeError:a不是一个函数@User_3535在服务或控制器中?@User_3535我想你是在搞依赖注入,请检查一下,谢谢它工作了,我在一个控制器中实现,在另一个控制器中检查,糟糕,好,没问题。
NProgress.start()
NProgress.done()