码迷,mamicode.com
首页 > 微信 > 详细

微信js-sdk,选择图片,上传,下载到本地,php服务端

时间:2016-04-02 02:01:13      阅读:518      评论:0      收藏:0      [点我收藏+]

标签:

//前端js代码
<script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId}", timestamp: {pigcms:$signPackage.timestamp}, nonceStr: ‘{pigcms:$signPackage.nonceStr}‘, signature: ‘{pigcms:$signPackage.signature}‘, url : ‘{pigcms:$signPackage.url}‘, jsApiList: [ ‘checkJsApi‘, ‘chooseImage‘, ‘previewImage‘, ‘uploadImage‘, ‘downloadImage‘ ] }); wx.ready(function() { // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 wx.checkJsApi({ jsApiList: [ ‘chooseImage‘, ‘previewImage‘, ‘uploadImage‘, ‘downloadImage‘, ‘getNetworkType‘, ‘openLocation‘, ‘getLocation‘, ‘downloadVoice‘ ], success: function(res) { //alert(JSON.stringify(res)); } }); var images = { localId: [], serverId: [], downloadId: []//可以无视 }; var xmlHttpRequest; var accessToken=getCookie("accessToken"); //选择图片 document.getElementById("selpic").onclick = function() { $("#errormsg").append("开始选择图片<br />"); wx.chooseImage({ count: 9, // 默认9 sizeType: [‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有‘original‘, success: function(res) { images.localId = res.localIds;// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 jQuery(function(){ var imglist=""; $.each( res.localIds, function(i, n){//这里是显示已选择的图片 imglist+=‘<li ><img src="‘+n+‘" style="width:95%;height:150px;" /></li>‘; //$("#errormsg").append("res.localIds:"+n+"<br />"); }); $("#imageContainer > ul").html(imglist); }); } }); } document.querySelector("#uploadImage").onclick = function () {//绑定onclick事件,如果没有这个按钮,要注释掉代码,不然点击无效 $("#errormsg").show(); $("#errormsg").append("<br />开始上传图片");//下文对此div赋值,只为了直观的看到动态效果 if (images.localId.length == 0) { alert(‘请先选择图片‘); return; } images.serverId = []; var localIds = images.localId; uploadimg(localIds); } var currentproindex=0; function getimgtoserver(serverIds){ //$("#errormsg").append("<br />serverIds length:"+serverIds.length+","); var classid=$("#seltype").val(); var classname=encodeURI($("#seltype option:selected").text());//传汉字需要转一下,php那边再翻转一下就好了 var serverId=serverIds.pop();//很微妙的方法,每次从数组取一个 var proname=encodeURI($("#txtname").val()); var newurl="http://ab.com/i_product.php?action=getwximg&proname="+proname+"&classid="+classid+"&classname="+classname+"&proindex="+currentproindex+"&uname={pigcms:$_SESSION[‘uname‘]}&uid={pigcms:$_SESSION[‘uid‘]}&token={pigcms:$_SESSION[‘token‘]}&wxurl=http://file.api.weixin.qq.com/cgi-bin/media/get&random="+Math.random()+"&accesstoken="+accessToken+"&mediaid="+serverId;//这里拼接地址,给服务器传参,下载图片需要在服务端处理,js请求存在跨域问题,并且,微信里,jq的初始xmlHttpRequest不能用,只能手写了,难道是我不会用jq? //$("#errormsg").append("<br />"+newurl); //$("#errormsg").append("<br />serverId:"+serverId) xmlHttpRequest.open("POST",newurl,true);//防止参数过长,还是用post方法吧 xmlHttpRequest.onreadystatechange=function(){ if (xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status==200){ if(serverIds.length>0){ currentproindex+=1; getimgtoserver(serverIds);//递归调用,等本次成功,再开始第二个图片的上传操作 } else{ $("#errormsg").append("<br />上传成功"); } //$("#errormsg").append("<br />"+xmlHttpRequest.responseText); } else{ $("#errormsg").append(xmlHttpRequest.status); } } else if(xmlHttpRequest.readyState==1){ //$("#errormsg").append("<br />初始化成功"); } else if(xmlHttpRequest.readyState==2){ $("#errormsg").append("<br />正在发送数据"); } else if(xmlHttpRequest.readyState==3){ $("#errormsg").append("<br />正在等待服务器反馈"); } else{ $("#errormsg").append("发生错误了。");//+xmlHttpRequest.responseText); } } xmlHttpRequest.send(); } function uploadimg(localIds){ //$("#errormsg").append("<br />localIds length:"+localIds.length); var localId = localIds.pop(); wx.uploadImage({ localId: localId, // isShowProgressTips: 1, success: function (res) { images.serverId.push(res.serverId); //$("#errormsg").append("<br />"+res.serverId+","); if(localIds.length > 0){ uploadimg(localIds); } else{ if(window.XMLHttpRequest){ xmlHttpRequest=new XMLHttpRequest(); }else{ xmlHttpRequest=new ActiveXObject("MSXML2.XMLHTTP.3.0");//("Microsoft.XMLHTTP"); } $("#errormsg").append("<br />准备处理,请等待..."); var serverIds=images.serverId; getimgtoserver(serverIds); } }, fail: function (res) { alert("上传失败,请稍候重试"); } }); } }); wx.error(function(res) { alert(res.errMsg); }); //读取cookies function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return (arr[2]); else return null; } function initsel(){ var url="http://abc.com/chat/i_product.php?action=getclothestype&token={pigcms:$_SESSION[‘token‘]}"; //alert(url); $.getJSON(url,function(data){ var str="<option value=‘‘>-请选择-</option>"; if(data.length>0){ for(i=0;i<data.length;i++){ str+="<option value=‘"+data[i].id+"‘>"+data[i].name+"</option>" } } $("#seltype").html(str); }); } $(function(){ initsel();//初始化下拉菜单 }); </script>
//php服务端代码
$act
= $_GET[‘action‘]; if ($act == ‘getwximg‘) { $wxurl=$_GET[‘wxurl‘]; $access_token=$_GET[‘accesstoken‘]; $media_id=$_GET[‘mediaid‘]; $newurl=$wxurl."?access_token=".$access_token."&media_id=".$media_id;//用php去请求获取图片的接口,js直接调用存在跨域问题 $token=$_GET[‘token‘]; $uid=$_GET[‘uid‘]; $uname=$_GET[‘uname‘]; $proindex=$_GET[‘proindex‘]; $classid=$_GET[‘classid‘]; $classname=urldecode($_GET[‘classname‘]);//取到的汉字,翻转一下 $proname=urldecode($_GET[‘proname‘]); $fileInfo = downloadWeixinFile($newurl);//通过接口,取结果 $filename = date("ymdhis",time()).".jpg";//图片名称 $time = time(); $newfolder="uploads/".date("y-m-d",$time)."/";//文件夹名称 saveWeixinFile($newfolder,$filename, $fileInfo["body"]);//把取到的base64代码,保存成图片 //echo $newurl; if($proindex==0){//因为图片是一次性上传的,这里判断一下,第一张作为产品的封面,剩下的作为产品的描述 $query = "INSERT INTO tp_img(uid,uname,token,createtime,uptatetime,classid,classname,title,pic) VALUE(‘".$uid."‘,‘".$uname."‘,‘".$token."‘,‘".$time."‘,‘".$time."‘,".$classid.",‘".$classname."‘,‘".$proname."‘,‘http://abc.com/chat/".$newfolder.$filename."‘)"; //$query = "INSERT INTO t_ChatMessage(UserCode,Contents,ToUser,IsRead) VALUE(‘$sendid‘, ‘$msg‘,‘$toid‘,‘0‘)"; $result = mysql_query($query) or die("{\"error\":true,\"errorMsg\":\"Error in query: $query. " . mysql_error()."\"}"); } else{ $query ="select * from tp_img where token=‘".$token."‘ order by uptatetime desc limit 1"; $result = mysql_query($query) or die("{\"error\":true,\"errorMsg\":\"Error in query: $query. " . mysql_error()."\"}"); $items = array(); while($row = mysql_fetch_array($result)){ array_push($items, ($row)); $query_update="update tp_img set info=CONCAT(info,‘‘,‘<div style=\"margin-top:3px;\"><img src=\"http://abc.com/chat/".$newfolder.$filename."\" /></div>‘) where id=$row[id]";//在产品描述的字段上追加内容 mysql_query($query_update); } } //echo "{\"error\":\""+$rtmsg+"\"}"; }
function downloadWeixinFile($url)  
{  
    $ch = curl_init($url);  
    curl_setopt($ch, CURLOPT_HEADER, 0);      
    curl_setopt($ch, CURLOPT_NOBODY, 0);    //只取body头  
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);  
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);  
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
    $package = curl_exec($ch);  
    $httpinfo = curl_getinfo($ch);  
    curl_close($ch);  
    $imageAll = array_merge(array(‘header‘ => $httpinfo), array(‘body‘ => $package));   
    return $imageAll;  
}  
   
function saveWeixinFile($newfolder,$filename, $filecontent)  
{     
    createFolder($newfolder);  
    $local_file = fopen($newfolder."/".$filename, ‘w‘);  
    if (false !== $local_file){  
          
        if (false !== fwrite($local_file, $filecontent)) {  
          
            fclose($local_file);  
         
        }  
    }  
}  
 function createFolder($path)  
 {  
  if (!file_exists($path))  
  {  
   createFolder(dirname($path));  
   mkdir($path, 0777);  
  }  
 }  

 

//第二种方法

$accessToken = ‘公众号 AccessToken‘;
$media_id = ‘wx.uploadImage 返回的 serverId‘;

// 要存在你服务器哪个位置?
$targetName = ‘./tmp/‘.date(‘YmdHis).‘.jpg‘;

$ch = curl_init("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$serverId}");
$fp = fopen(FCPATH.$targetName, ‘wb‘);
curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);

 

微信js-sdk,选择图片,上传,下载到本地,php服务端

标签:

原文地址:http://www.cnblogs.com/zhoumeng780/p/5346762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!