angularjs手机webapp 利用input拍照，图库选择上传图片

1.html

<div class="col col-50" style="text-align: center">
<img src="{{imageUrl}}{{fileUrl}}" width="60" height="60" style="border-radius: 30px" >
<div id="myupload">
<input id="uploadfile" file-model="myFile" type="file" name="file" accept="image/*" style="opacity: 0;position: absolute;font-size: 100px;right: 60%;top: 44px;width: 50%;height: 100px">
</div>
<p style="margin-top: 5px">ATM会员</p>
</div>

2.directive

.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs, ngModel) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(event){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
scope.file = (event.srcElement || event.target).files[0];
scope.getFile(scope.file);
$('#uploadfile').val(''); //发现拍照上传后再次拍照不会调用change方法，加入这行代码可解决
});
}
};
}])

3.controller
$scope.getFile = function (file) {
$ionicLoading.show({
template: '<ion-spinner icon="ios-small"></ion-spinner>'+'图片上传中，请稍候...',
duration: 3000
});
Upload.upload({
url: ApiUrl.url+'/User_login/image',
data: {file: file}
}).then(function (resp) {
$scope.fileUrl = resp.data;
toastr.success( "上传成功");
localStorage.setItem("avatar",$scope.fileUrl);
console.log($scope.imageUrl+$scope.fileUrl)
$ionicLoading.hide();
// console.log('Success ' + resp.data.file_name + 'uploaded. Response: ' + resp.data);
}, function (resp) {
$ionicLoading.hide();
toastr.warning( resp.data.tips,"上传失败");
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};

上传用的ng-file-upload插件 地址：https://github.com/danialfarid/ng-file-upload点击打开链接