您的位置:首页 > 编程语言 > PHP开发

thinkphp微信开发之jssdk图片上传并下载到本地服务器

2015-05-12 10:24 976 查看
public function test2(){
$Weixin = new \Weixin\Controller\BaseController();
$this->assign('signPackage', $Weixin->jssdk->GetSignPackage());
$this->display();
}


html核心代码

<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<form action="{:U('doJoin')}"  method="post">
<h3 class="title">参赛人员照片:</h3>
<div>
<img class="preview" src="{$vote.vote_pic|get_cover='thumb'}" alt="">
<if condition="!$vote['status']" ><button class="uploadImage" type="button" id="vote_pic">点击上传(建议上传800*600的png,jpg,或者gif格式图片)</button></if>
<input type="hidden" name="vote_pic">
</div>
<button class="bbon" type="submit" id="submit">提交</button>
</form>
<script>
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
]
});
wx.ready(function () {
// 5.1 拍照、本地选图
var images = {
localId: [],
serverId: []
};

// 5.3 上传图片
$(".uploadImage").click(function(){
var that =$(this);
images.localId = [];
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
if (images.localId.length == 0) {
alert('请先使用 chooseImage 接口选择图片');
return;
}
if(images.localId.length > 1) {
alert('目前仅支持单张图片上传,请重新上传');
images.localId = [];
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
that.siblings('img.preview').attr('src',images.localId[0]);
// alert('已上传:' + i + '/' + length);
images.serverId.push(res.serverId);
that.siblings('input[type=hidden]').val(images.serverId[0]);
// alert( that.siblings('input[type=hidden]').val());
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
}
});
});

$("#submit").click(function(){
$.ajax({
type: 'post',
url: $("form").attr('action')  ,
data : $("form").serialize(),
dataType: 'json',
success : function(data){
if(data.status){
alert(data.info);
window.location.href = data.url;
}else{
}

}
});
return false;
})
});
</script>


提交到服务器端 服务器端处理过程如下

public doJoin(){
if(IS_POST && $_POST['vote_pic']){   //提交过来的vote_pic是微信服务器端的图像资源id
$pic_id = $_POST['vote_pic'];
$return = array();
C('WEIXIN_UPLOAD') = './Uploads/Weixin/';//定义保存路径
$dir = realpath(C('WEIXIN_UPLOAD')).'/'.date('Y_m_d').'/';//为方便管理图片 保存图片时 已时间作一层目录作区分
if(!file_exists($dir)){
mkdir($dir,'0777');
}
$Weixin = new \Weixin\Controller\BaseController();
$pic_url = $Weixin->WechatAuth->mediaGet($pic_id); //获取服务器图片路径
$time = time().substr($pic_id, 9,3);
$filename = 'wx_'.$time.'.jpg';   //定义图片文件名
$Http = new \Org\Net\Http;
if($Http::curlDownload($pic_url,$dir.$filename)){//http下载图片
$this->success('提交成功',U('index'));
}

}

}


  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: