说明
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。
注明:以上为引用,本文笔者拍照方式上传头像并未直接调用相机,而是采用file属性capture=”camera” 即可,详细见代码
- 笔者主要实现使用拍照和选择图库的方式上传头像功能
开发准备
开发工具
笔者采用JetBrains WebStorm 10.0.3环境安装可参阅笔者博文AngularJS入门之简单的项目搭建
action-sheet.js与action-sheet.css下载
笔者提供action-sheet,CSDN资源最低2积分,读者可自行百度下载
功能开发
引用action-sheet.js与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: 使用document.write写入的方式引用js文件可以起到去缓存的效果
app.js代码片段
var myApp = angular.module('myApp',["ngRoute",'actionsheet','upHeadImageCtrl']);
ps: myApp 注册”ngRoute”,’actionsheet’,’upHeadImageCtrl’
UpHeadImageCtrl.js代码片段
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 = "上传头像";
$scope.goback = function () {
history.back();
};
//上拉菜单
$scope.open=function(){
var as = new ActionSheet({
buttons: {
'拍照': function(e){
//if(!confirm('确定吗?')) return;
$("#cameraup").click();
this.hide();
},
'照片图库': function(e){
$("#fileup").click();
//if(!confirm('确定吗?')) return;
this.hide();
}
/* '跳转到百度': 'http://baidu.com/',*/
}
});
as.show();
};
$scope.reader = new FileReader(); //创建一个FileReader接口
$scope.myFile=null;
$scope.thumb = {}; //用于存放图片的base64
//头像上传
$scope.headImageupload = function(files){
$scope.myFile=null;
$scope.myFile=files[0];
$scope.submitUp();
$scope.reader.readAsDataURL($scope.myFile); //FileReader的方法,把图片转成base64
$scope.reader.onload = function(ev) {
$scope.$apply(function(){
$scope.thumb[0] = {
imgSrc : ev.target.result, //接收base64
}
});
};
};
$scope.imgurl=basepath+'images/my/touxiang.png';
$scope.thumb[0] = {
imgSrc : $scope.imgurl, //接收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, //接收base64
};
}
}
});
//头像上传
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(); //以下为像后台提交图片数据
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);
})
};
}])
uploadheadimage.html代码片段
<!--<input type="button" value="ActionSheet"/>-->
<form enctype="multipart/form-data">
<div>
<div ng-repeat="item in thumb" style="margin: auto;" align="center">
<!-- 采用angular循环的方式,对存入thumb的图片进行展示 -->
<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="提 交" />-->
</form>