好吧，MUI做的app， 不知道怎么上传头像，需要和网页一样用表单吗？ 或者引入第三方的upload的js？
我的代码是这样的：
头像：
<div class="Avatar">
<img src="images/g03.png" class="Avatar_img" style="height: 70px;" id="head-img" />
<p style="color: #FFF;" id="user">未登录</p>
<p style="color:#fff;">积分：<span id="jifen">0</span></p>
<div class="checkin">
<span class="mui-icon mui-icon-compose" style="float: left;margin: 3px 0px 0px 10px;"></span>
<span class="qiandao" id="qiandao" style="display: block;"><a style="color: #000;text-decoration:none;">签到</a></span>
<span class="qiandao" id="yiqiandao" style="display: none;">已签到</span>
</div>
</div>上传
<script>
/*点击头像触发*/
document.getElementById('head-img').addEventListener('tap', function() {
if(mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改用户头像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按钮点击事件*/
switch(b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg(); /*打开相册*/
break;
default:
break;
}
})
}
});
//拍照
function getImage() {
var cmr = plus.camera.getCamera();
var res = cmr.supportedImageResolutions[0];
var fmt = cmr.supportedImageFormats[0];
cmr.captureImage(function(path) {
//plus.io.resolveLocalFileSystemURL(path, function(entry) {
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var localUrl = entry.toLocalURL();
console.log(localUrl);
uploadHead(localUrl + "?version=" + new Date().getTime());
}, function(err) {
console.error("拍照失败：" + err.message);
}, {
index: 1
});
});
}
//本地相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
console.log(e); //打印图片地址？
//document.getElementById('head-img').src = e; //更换图片
uploadHead(e); /*上传图片*/
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
},function(e) {
console.log('copy image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.copyTo(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHead(path); /*上传图片*/
},function(e) {
console.log('copy image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
//上传头像图片
function uploadHead(imgPath) {
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/*在这里调用上传接口*/
mui.ajax("http://tbqc.weiyucheye.com/index.php/Home/Me/uploadhead",{
data: {
img: imgData
},
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data){
mui.toast('上传成功',{
duration:'long',
type:'div'
});
document.getElementById('head-img').src = imgPath;
},
error: function(xhr, type, errorThrown) {
mui.toast('网络异常，请稍后再试！');
}
});
}
}
//将图片压缩转成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if(width > height) {
if(width > 100) {
height = Math.round(height *= 100 / width);
width = 100;
}
} else {
if(height > 100) {
width = Math.round(width *= 100 / height);
height = 100;
}
}
canvas.width = width; /*设置新的图片的宽度*/
canvas.height = height; /*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.8);
return dataURL.replace("data:image/png;base64,", "");
}
</script>后台（这后台好像问题挺大的）
public function uploadhead(){
$user = D('tbq_user');
$picture = I("img");
$data['id'] = I("id");
if($_FILES[$picture]['tmp_name']!=''){
$upload = new \Think\Upload();
$upload->allowExts = explode(',', 'jpg,gif,png,jpeg');
$upload->saveName = 'time';
$upload->savePath = $savePath;
$upload ->rootPath = './' ;
// 上传文件
$info = $upload -> upload();
if(!$info) {// 上传错误提示错误信息
//$this->error($upload->getError());
$returnVal['error'] = '图片上传失败';
}else{ // 上传成功 获取上传文件信息
$data['picture']=$info['savepath'].$info['savename'];
$returnVal['error'] = '';
}
}
$this -> ajaxReturn($returnVal);
}
附件是前台页面。
求大神指点一下，谢谢~
