微信js sdk上传多张图片,微信上传多张图片
该案例已tp3.2商城为例
直接上代码:
php代码:
public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S(‘access_token‘); if (!$token) { $res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=11111111111111&secret=11111111111111111111111111"); $res = json_decode($res, true); $token = $res[‘access_token‘]; // 注意:这里需要将获取到的token缓存起来(或写到数据库中) // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token,每日有次数限制 // 通过此接口返回的token的有效期目前为2小时。令牌失效后,JS-SDK也就不能用了。 // 因此,这里将token值缓存1小时,比2小时小。缓存失效后,再从接口获取新的token,这样 // 就可以避免token失效。 // S()是ThinkPhp的缓存函数,如果使用的是不ThinkPhp框架,可以使用你的缓存函数,或使用数据库来保存。 S(‘access_token‘, $token, 3600); } $ticket = S(‘wx_ticket‘); if(!$ticket) { $tokinfo = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi"); $tokinfo = json_decode($tokinfo, true); $ticket=$tokinfo[‘ticket‘]; S(‘wx_ticket‘, $ticket, 3600); } $url = ‘http://‘.$_SERVER[‘HTTP_HOST‘].$_SERVER[‘REQUEST_URI‘]; if($ticket){ $timestamp = time(); $wxnonceStr = "abcdefghijklmnopqrstuvw"; $wxticket = $ticket; $wxOri = "jsapi_ticket=$wxticket&noncestr=$wxnonceStr×tamp=$timestamp&url=$url"; $wxSha1 = sha1($wxOri); $this->assign("token",$token); $this->assign("timestamp",$timestamp); $this->assign("wxnonceStr",$wxnonceStr); $this->assign("wxshal",$wxSha1); } }
模板中的js代码:
// 微信配置 var token="{$token}"; var timestamp="{$timestamp}"; var wxnonceStr = "{$wxnonceStr}"; var wxshal = "{$wxshal}"; wx.config({ debug: false, appId: "wx978a1c1edb5fea34", timestamp: "{$timestamp}", nonceStr: "{$wxnonceStr}", signature: "{$wxshal}", jsApiList: [‘onMenuShareAppMessage‘, ‘onMenuShareTimeline‘,‘chooseImage‘,‘previewImage‘,‘uploadImage‘,‘downloadImage‘] // 功能列表,我们要使用JS-SDK的什么功能 }); var serverids=[]; var leng=0; var syncUpload = function(localIds){ myApp.hidePreloader(); myApp.showPreloader(); var localId = localIds.pop(); wx.uploadImage({ localId: localId, isShowProgressTips:0, success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID serverids.push(serverId); //其他对serverId做处理的代码 if(localIds.length > 0){ syncUpload(localIds); } if(leng==serverids.length){ var json = {}; for(var i=0;i<serverids.length;i++) { json[i]=serverids[i]; } var serids=JSON.stringify(json); $.ajax({ type : "post", url : "/H5/index/downloadMedia", data : {mediaid:serids} , dataType:"json", async : false, success : function(response){ myApp.hidePreloader(); $.each(response.image,function (k,v) { var contentUl = SetImgBox(v); $(".img_box").append(contentUl); }) myApp.hidePreloader(); alert("上传成功!"); //alert(response.image[0]) //$(".ago").attr("src",response.image[0]) } }); } } }); }; $(function () { wx.ready(function () { // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口 $("#contentid").click(function () { var ileng=$("#imglength li").length; var wleng=9+1-ileng; var that = $(this); wx.chooseImage({ count: wleng, // 默认9 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 leng = localIds.length; syncUpload(localIds); //上传代码图片就在此直接调用 } }); }) }) })
php 服务器接收的代码:
public function downloadMedia() { $mediaId=$_POST["mediaid"]; $appid="11111111111111111111"; $secret="222222222222222222222222222"; $mediaId = json_decode($mediaId); $token = S(‘access_token‘); $imgs=array(); if (!$token) { $res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=11111111111111111111&secret=11111111111111111111111111111"); $res = json_decode($res, true); $token = $res[‘access_token‘]; // 注意:这里需要将获取到的token缓存起来(或写到数据库中) // 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token,每日有次数限制 // 通过此接口返回的token的有效期目前为2小时。令牌失效后,JS-SDK也就不能用了。 // 因此,这里将token值缓存1小时,比2小时小。缓存失效后,再从接口获取新的token,这样 // 就可以避免token失效。 // S()是ThinkPhp的缓存函数,如果使用的是不ThinkPhp框架,可以使用你的缓存函数,或使用数据库来保存。 S(‘access_token‘, $token, 3600); } foreach ($mediaId as $key=>$value){ $nfilename = date(‘YmdHis‘).get_rand_str(6); $day=date("Y"); $dam=date("m"); $updir = ‘./Public/trade/‘.$day.‘/‘.$dam.‘/‘; $updir2 = ‘/Public/trade/‘.$day.‘/‘.$dam.‘/‘; if (!is_dir($updir)){ //第三个参数是“true”表示能创建多级目录,iconv防止中文目录乱码 $res=mkdir(iconv("UTF-8", "GBK", $updir),0777,true); if (!$res){ $this->error = "目录 $updir 创建失败"; return false; // $this->output_error("目录 $updir 创建失败"); } } $med=$value; $content = file_get_contents("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=$token&media_id=$med"); $filename = "$updir/$nfilename.jpg"; $file2="$updir2/$nfilename.jpg"; file_put_contents($filename, $content); array_push($imgs,$file2); }