Explain

Development preparation

• development tool

  For the installation of JetBrains WebStorm 10.0.3, please refer to my blog Simple project construction for getting started with AngularJS

• Download action sheet.js and action sheet.css

  Provided by the author action-sheet , CSDN resource minimum 2 points, readers can download by themselves Baidu

Function development

Reference action sheet.js and action sheet.css

    <link rel="stylesheet" type="text/css" href="css/action-sheet.css"/>
 <script>
        document.write("<s"+"cript  data-main='text/javascript' src='lh-bsweb/js/action-sheet.js?t="+new Date().getTime()+"'></scr"+"ipt>");
    </script>

app.js snippet

var myApp = angular.module('myApp',["ngRoute",'actionsheet','upHeadImageCtrl']);

UpHeadImageCtrl.js code snippet

controller('upHeadImageCtrl', ['$scope','$rootScope','$location','userService','$http',function ($scope,$rootScope,$location,userService,$http) {
        currentpage="bankcard";
        var token= userService.checkLgin();
        $rootScope.basepath=basepath;
        $rootScope.headTitle = $rootScope.title = "Upload Avatar";
        $scope.goback = function () {
            history.back();
        };
        //Pull up menu
        $scope.open=function(){
            var as = new ActionSheet({
                buttons: {
                    'Photograph': function(e){
                        //if(!confirm('are you sure? ')) return;
                        $("#cameraup").click();
                        this.hide();
                    },
                    'Photo Gallery ': function(e){
                        $("#fileup").click();
                        //if(!confirm('are you sure? ')) return;
                        this.hide();
                    }
                    /* 'Jump to Baidu ':'http://baidu.com/',*/
                }
            });
            as.show();
        };
        $scope.reader = new FileReader(); //Create a FileReader interface
        $scope.myFile=null;
        $scope.thumb = {};      //base64 for pictures
     //picture upload 
       $scope.headImageupload = function(files){
            $scope.myFile=null;
            $scope.myFile=files[0];
            $scope.submitUp();
            $scope.reader.readAsDataURL($scope.myFile);  //FileReader method, convert the image to base64
            $scope.reader.onload = function(ev) {
                $scope.$apply(function(){
                    $scope.thumb[0] = {
                        imgSrc : ev.target.result,  //Receive base64
                    }
                });
            };
        };
        $scope.imgurl=basepath+'images/my/touxiang.png';
        $scope.thumb[0] = {
            imgSrc :   $scope.imgurl,  //Receive base64
        };
        userService.getbusinessinfo({token:token}).then(function(data){
            if(data.code>0){
                $scope.imgurl=data.data[0].headurl;
                if( $scope.imgurl != null){
                    $scope.thumb[0] = {
                        imgSrc :   $scope.imgurl,  //Receive base64
                    };
                }
            }
        });
        //picture upload 
        var head_h5_upload_ops = {
            init:function(){
                this.eventBind();
            },
            eventBind:function(){
                $("#fileup").change(function(){
                    $scope.headImageupload(this.files);
                });
                $("#cameraup").change(function(){
                    $scope.headImageupload(this.files);
                });
            },
            compress : function (res) {

            }
        };
        head_h5_upload_ops.init();
        $scope.submitUp = function(){
            var data = new FormData();      //Here is the picture data submitted in the background
            data.append('headimage', $scope.myFile);
            data.append('token',token);
            $http({
                method: 'post',
                url: baseurl+'/user/upheadimage',
                data:data,
                headers: {'Content-Type': undefined},
                transformRequest: angular.identity
            }).success(function(data) {
                console.log(data);
            })
        };
    }])

Uploadreadimage.html snippet

  <!--<input type="button" value="ActionSheet"/>-->
    <form  enctype="multipart/form-data">
        <div>
            <div ng-repeat="item in thumb" style="margin: auto;" align="center">
                <!-- Use angular Circular mode thumb Show the pictures of -->
                <span ng-if="item.imgSrc" ng-click="img_del($index)">
                    <img ng-src="{{item.imgSrc}}" style="width: 212px;height: 212px;margin-top: 20%;"/>
                </span>
            </div>
            <div style="display: none;">
                <label >
                    <input type="file"  id="fileup" accept="image/*" file-model="images" />
                    <input  type="file" id="cameraup" accept="image/*;" capture="camera"   />
                </label>
            </div>
        </div>
        <!--<input type="submit" name="" value="Submit" />-->
    </form>

Effect display