标签:state dex ima als attr elb coding dal nal
app中的图片上传,例如:个人信息页面,上传头像
使用:
UIMediaScanner 地址: https://docs.apicloud.com/Client-API/UI-Layout/UIMediaScanner
前端代码
<div class="img_box"> <img class="imgPic" src="../../image/33.jpg"/> <a class="chooseImg" href="javascript:;" onclick="chooseImg();">点击上传</a> <p class="lessen">提示:点击图片以重新上传</p> </div>
js数据处理
apiready = function(){ UIMediaScanner = api.require(‘UIMediaScanner‘); }; //上传照片 //使用本模块前需在云编译页面添加勾选访问相册权限,否则会有崩溃闪退现象 var UIMediaScanner = null; function chooseImg() { api.actionSheet({ cancelTitle: ‘取消‘, buttons: [‘拍照‘, ‘从手机相册选择‘] }, function(ret, err) { var index = ret.buttonIndex; if (index == 1) { api.getPicture({ sourceType: ‘camera‘, encodingType: ‘jpg‘, mediaValue: ‘pic‘, destinationType: ‘url‘, quality: 40, saveToPhotoAlbum: true }, function(ret, err) { if (ret) { updateImg(ret.data); } }); } else if (index == 2) { UIMediaScanner.open({ type : ‘picture‘, column : 4, max : 1, sort : { key : ‘time‘, order : ‘desc‘ }, texts : { stateText : ‘选择图片‘, cancelText : ‘取消‘, finishText : ‘完成‘ }, styles : { bg : ‘#fff‘, //资源器背景 mark : { //选中图片后的,对号 icon : ‘‘, position : ‘bottom_left‘, //位置 size : 30 //大小 }, nav : { bg : ‘#fff‘, stateColor : ‘#56b7e1‘, stateSize : 18, cancelBg : ‘rgba(0,0,0,0)‘, cancelColor : ‘#56b7e1‘, cancelSize : 15, finishBg : ‘rgba(0,0,0,0)‘, finishColor : ‘#56b7e1‘, finishSize : 15 } }, exchange : true }, function(ret, err) { if (ret) { //transPath 图片 转换徐调用 UIMediaScanner.transPath({ //图片的路径 path : ret.list[0].path }, function(ret, err) { if (ret) { updateImg(ret.path); } else { $api.showToast(‘图片转换出错,请重新选择‘); } }); } }); } }); }; // 上传图片 function updateImg(path) { api.showProgress({ title : ‘ ‘, text : ‘正在上传...‘, modal : true }); api.ajax({ url : MainUrl + ‘User&a=upload_img‘, method : ‘post‘, timeout : 60, dataType : ‘json‘, returnAll : false, data : { files : { ‘images‘ : path } } }, function(data, err) { api.hideProgress(); if (err) { $api.showToast(‘网络异常,请稍后重试‘); return; } if (data.status == 200) { $api.css($api.byId(‘show_img‘), ‘background: url(‘ + data.data + ‘) center no-repeat; background-size: cover;‘); $api.attr($api.byId(‘show_img‘), ‘data-img‘, data.data); } else { $api.showToast(data.info); } }); };
标签:state dex ima als attr elb coding dal nal
原文地址:https://www.cnblogs.com/haonanZhang/p/9001968.html