Explain
The pull-up menu (action sheet) lets the user select options by pop-up boxes.
Very dangerous options are highlighted in red for immediate recognition. You can make it disappear by clicking the Cancel button or by clicking on a blank space.
Note: the above is a reference. In this paper, the author does not directly call the camera when uploading the head image by taking photos, but uses the file attribute capture = "camera". See the code for details
- The main function of the author is to upload the head image by taking photos and selecting the gallery
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>
ps: using document.write to reference js file can achieve the effect of de caching
app.js snippet
var myApp = angular.module('myApp',["ngRoute",'actionsheet','upHeadImageCtrl']);
ps: myApp registers "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>