这是我如何使用角度jquery文件上传
var album = angular.module('album', ['restangular', 'blueimp.fileupload']),
.controller('somecontroller',function($scope,){
$scope.options = {
something
}
})
我所做的就是设置scope.options,更改控制器,一切都神奇地起作用
设置jquery文件上传似乎很容易,但有些东西让我很困惑
如何调用jquery文件上传的回调函数。例如,如果文件上传成功,我想通过调用fileuploaddone函数更新ui,它让我感到困惑,因为我的控制器中没有添加文件。
我是angularJS的新手,请帮我理解角度jquery文件上传的工作流程
答案 0 :(得分:25)
blueimp.fileupload使用通过$ emit触发的事件来通知父作用域:
on([
'fileuploadadd',
'fileuploadsubmit',
'fileuploadsend',
'fileuploaddone',
'fileuploadfail',
'fileuploadalways',
'fileuploadprogress',
'fileuploadprogressall',
'fileuploadstart',
'fileuploadstop',
'fileuploadchange',
'fileuploadpaste',
'fileuploaddrop',
'fileuploaddragover',
'fileuploadchunksend',
'fileuploadchunkdone',
'fileuploadchunkfail',
'fileuploadchunkalways',
'fileuploadprocessstart',
'fileuploadprocess',
'fileuploadprocessdone',
'fileuploadprocessfail',
'fileuploadprocessalways',
'fileuploadprocessstop'
].join(' '), function (e, data) {
if ($scope.$emit(e.type, data).defaultPrevented) {
e.preventDefault();
}
})
这意味着您只需在其中一个父作用域控制器中添加一个事件侦听器,例如:
$scope.$on('fileuploadprocessdone', function(event, files){
$.each(files, function (index, file) {
//do what you want
});
});
您还可以在配置阶段覆盖默认的handleResponse功能,例如:
angular.module('myApp', ['blueimp.fileupload']).
.config(['fileUploadProvider', function (fileUploadProvider){
fileUploadProvider.defaults.handleResponse = function (e,data){
var files = data.result && data.result.files;
if (files) {
data.scope().replace(data.files, files);
// do what you want...
} else if (data.errorThrown || data.textStatus === 'error') {
data.files[0].error = data.errorThrown ||
data.textStatus;
}
};
}]);