一、需求
微信网页中实现上传头像，用户信息，用户宣传照的功能。
二、问题
微信网页上传普通浏览器的上传不一样，微信内置浏览器禁止了普通的input上传功能，并且此标签在有些移动终端显示不佳。
三、解决
使用微信官方文档提供的jssdk的上传图片接口。微信自己的jssdk里面的图片上传不用考虑兼容性。
具体实现逻辑是：
配置好jssdk后，可以使用jssdk上传接口上传图片到微信服务器，微信服务器会返回给你一个资源id，我们在使用js异步或者表单同步把资源id传输到php服务器端，php服务器端就利用微信的多媒体下载文件接口再次请求微信服务器获得图片，然后保存到服务器上。
下面的一个异步上传，并可以上传后显示图片的实现代码：
wx.ready(function () {
// 5 图片接口
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: [],
};
document.querySelector(‘#chooseImage‘).onclick = function () {
//选择图片后开始异步上传到微信服务器，在syncUpload中接受微信服务器返回的资源id，组合后uploadserverid异步上传到服务器，服务器处理后返回图片的路径，客户端js接受图片路径后组合成html，动态插入。
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
len = images.localId.length;
syncUpload(images.localId);
}
});
};
//异步上传图片到微信服务器
var syncUpload = function(localIds){
var localId = localIds.shift();
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
images.serverId.push(res.serverId);// 返回图片的服务器端ID
if(len==images.serverId.length){
//异步上传图片id到服务器
var serverids = images.serverId.join(‘,‘);
/*alert(serverids);*/
uploadserverid(serverids);
//销毁数据
images.localId = images.serverId = [];
}
//其他对serverId做处理的代码
if(localIds.length > 0){
syncUpload(localIds);
}
},
error: function(){
alert("asasasas");
}
});
};
//异步上传图片id到服务器，服务器返回真正的图片地址，js组装后显示在页面上
var uploadserverid = function(serverId){
$.ajax({
url: "./index.php?m=Signup&a=upload",
type: "GET",
data: "serverid="+serverId,
success: function(msg){
if(msg==‘‘){
alert("上传失败，请重试");
}
//拼接html
htmlpin(msg);
},
error:function(){
alert("上传失败，请重试");
}
});
}
var htmlpin = function(msg){
//拼接图片html，显示在页面
var html = ‘‘;
for (var i =0; i<=msg.length - 1; i++) {
html += ‘<div class="col-xs-3 text-center"> <img class="img-responsive" src="./public/‘+ msg[i]+‘"> </div>‘;
};
$(‘.photo-b‘).html($(‘.photo-b‘).html() + html);
var values = $(‘#hiddenimages‘).val();
if(values!=‘‘){values+=‘,‘;}
$(‘#hiddenimages‘).val(values + msg.join(‘,‘));
/* alert($(‘#hiddenimages‘).val());*/
}
}
服务器端：
根据微信文档描述，先获得access_token，然后根据token和资源id获得图片；注意：因为access_token每天的获取数量有限制，所以最好获取后保存到数据库中。并且access_token的长度是500多，所以要保证数据库字段的长度够用。
public function get_access_token(){
$tokenmodel = M(‘access_token‘);
$data = $tokenmodel->limit(1)->find();
/*if($data && $data[‘Expires_In‘]>time()){
return $data[‘Access_Token‘];
}*/
$url = ‘https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=‘.$this->AppID.‘&secret=‘.$this->AppSecret;
$html = file_get_contents($url);
$json = json_decode($html,true);
$tokenmodel->where(‘1‘)->delete();
$tokenmodel->add(array(‘Access_Token‘=>$json[‘access_token‘], ‘Expires_In‘=>intval($json[‘expires_in‘])+time()));
return $json[‘access_token‘];
}
//从微信服务器上获取媒体文件
public function get_media($access_token, $media_id){
$url = ‘https://api.weixin.qq.com/cgi-bin/media/get?access_token=‘.$access_token.‘&media_id=‘.$media_id;
$content = file_get_contents($url);
return $content;
}
//根据serverid从微信服务器获得图片并存储
public function upload(){
$serverid = I(‘get.serverid‘);
$serverids = explode(‘,‘, $serverid);
$wechatmodel = D(‘Wechat‘);
$flag = true;
foreach ($serverids as $key => $value) {
// M(‘images‘)->add(array(‘Sid‘=>‘12‘, ‘ImagePath‘=>$value));
$content = $wechatmodel->get_media($wechatmodel->get_access_token(), $value);
$imgname = getRandChar(7).‘.jpg‘;
file_put_contents(realpath("./public/") . ‘/‘.$imgname, $content);
/* $open_id = cookie(‘xiu‘);*/
/* if($open_id==‘og0Q7s_Diefeni0_2vPfN_Tauc3Q‘){*/
if($flag){
$flag = false;
//引入图片处理库
import(‘ORG.Util.Image.ThinkImage‘);
//使用GD库来处理1.gif图片
$img = new ThinkImage(THINKIMAGE_GD, "./public/$imgname");
//原图宽
$oldwidth = $img->width();
$oldheight = $img->height();
if($oldwidth>$oldheight){
$new = $oldheight;
}else{
$new = $oldwidth;
}
//将图片裁剪为440x440并保存为corp.gif
$img->crop($new, $new)->save("./public/thumbs/$imgname");
}
/* }*/
$imgnames[] = $imgname;
}
$this->ajaxReturn($imgnames);
}
原文地址：http://www.daydaytc.com/php/847.html