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

最新推荐文章于 2025-08-05 13:32:21 发布

原创最新推荐文章于 2025-08-05 13:32:21 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web app #angularjs #input拍照上传

angularjs 同时被 2 个专栏收录

13 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一种使用AngularJS实现图片上传与预览的方法，包括自定义指令、控制器及文件上传插件的使用，实现了从用户选择图片到服务器接收图片的全过程。

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 点击打开链接