1、html代码:
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-label">
头像
</div>
<div class="aui-list-item-input" style="margin:15px;" onclick="showAction();">
<img id="avatar" name="avatar" src="../image/default_headimg.png" width="100px;">
</div>
</div>
</li>
2.js事件,actionSheet弹出选择
function showAction(){
api.actionSheet({
title: '上传头像',
cancelTitle: '取消',
buttons: ['拍照','从手机相册选择']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
下面是效果图:
3、拍照和上传图片代码:
function getPicture(sourceType) {
if(sourceType==1){ // 拍照
//获取一张图片
api.getPicture({
sourceType: 'camera', //拍照
encodingType: 'png',
mediaValue: 'pic',
allowEdit: false,
//destinationType: 'base64', //返回base64地址
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
//var imgSrc = ret.base64Data; 如果是base64,要用这个属性获取地址
// 获取拍照数据并处理
if (ret) {
var imgSrc = ret.data;
if (imgSrc != "") {
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
}
}
});
}else if(sourceType==2){ // 从相册中选择
api.getPicture({
sourceType: 'album', //从相册中选择
encodingType: 'jpg',
mediaValue: 'pic',
allowEdit: false,
//destinationType: 'base64', //返回base64地址
quality: 90,
saveToPhotoAlbum: true
}, function(ret, err) {
// 获取拍照数据并处理
//var imgSrc = ret.base64Data; 如果是base64,要用这个属性获取地址
if (ret) {
var imgSrc = ret.data;
if (imgSrc != "") {
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
}
}
});
}
}
