首页 > 代码库 > 一个完整的微信上传图片下载图片实例,把手把教学
一个完整的微信上传图片下载图片实例,把手把教学
步骤一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK
如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js
备注：支持使用 AMD/CMD 标准模块加载方法加载
步骤三：通过config接口注入权限验证配置
步骤四：通过ready接口处理成功验证
步骤五：通过error接口处理失败验证
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：
- success：接口调用成功时执行的回调函数。
- fail：接口调用失败时执行的回调函数。
- complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
- cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
- trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：
- 调用成功时："xxx:ok" ，其中xxx为调用的接口名
- 用户取消时："xxx:cancel"，其中xxx为调用的接口名
- 调用失败时：其值为具体错误信息
基础接口
判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({ jsApiList: [‘chooseImage‘], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} }});备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。
上代码：
<?php session_start();?><!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--分享使用--> <meta itemprop="name" content="" /> <meta itemprop="description" name="description" content="" /> <meta itemprop="i mage" content="img_url" /> <meta name="format-detection" content="telephone=no" /> <link rel="stylesheet" type="text/css" href="../css/global.css"> <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="../css/my_css.6.21.css" /> <link rel="stylesheet" type="text/css" href="../css/NumberBank.css" /> <link rel="stylesheet" type="text/css" href="../css/zxd.css" /> <link rel="stylesheet" href="http://at.alicdn.com/t/font_jqxfkr2jiikhjjor.css" /></head><body> <header> <div id="head"> <a href="index.html"><span class="iconfont icon-left back"><span class="b_child">返回</span></span></a> <p>我为八街代言<a href=""><span class="iconfont icon-gengduo2 more"></span></a></p> </div> </header> <div id="content_choose"> <div class="main"> <h1>您选择了 您与玫瑰</h1> <div class="find"> <div class="box_img"><img src="../img/img1.png"/></div> </div> <div class="find" id="upload_btn"> <div class="box_img"><span class="inner"><img id="my_img" src="../img/photo.png" /></span></div> <input name="upload_img" type="text" id="upload_img_val" value="-1" /> </div> <div class="btn" ><a id="next_btn" href="activity.html"><img src="../img/btn1.png"/></a></div> </div> </div></body><?php $url = $_SERVER["DOCUMENT_ROOT"]."/class/JSSDK.php";include($url);$jssdk = new JSSDK($_SESSION["appid"], $_SESSION["appacrect"]);$return_data[‘AccessToken‘] = $jssdk ->getAccessToken();$return_data[‘SignPackage‘] = $jssdk->GetSignPackage();?><script type="text/javascript" src="../lib/jquery.1.11.3.min.js"></script><script type="text/javascript" src="../lib/swiper.min.js"></script><script type="text/javascript" src="../lib/uploadPreview.js"></script><script type="text/javascript" src="../script/zxd.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script> wx.config({ debug: false, // 开启调试模式,调用的看所有api的返回值会在客户端alert出来，若要pc端打开查传入的参数，可以在，参数信息会通过log打出，仅在pc端时才会打印。 appId: ‘<?php echo $return_data["SignPackage"]["appId"];?>‘, // 必填，公众号的唯一标识 timestamp: ‘<?php echo $return_data["SignPackage"]["timestamp"];?>‘, // 必填，生成签名的时间戳 nonceStr : ‘<?php echo $return_data["SignPackage"]["nonceStr"];?>‘, // 必填，生成签名的随机串 signature: ‘<?php echo $return_data["SignPackage"]["signature"];?>‘,// 必填，签名，见附录1 jsApiList: [‘chooseImage‘,‘uploadImage‘,‘downloadImage‘] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.error(function(res){ alert(res.errMsg); }); $(function(){ $("#next_btn").click(function(){ var img_val = $("#upload_img_val").val(); if(img_val==-1){ alert("请上传图片!");return false; }else{ //下载图片微信图片到本地服务器 var data ={img_id:img_val,access_token:‘<?php echo $return_data["AccessToken"];?>‘}; var url = ‘<?php echo $_SESSION["base_site_url"]."/weixin/downlodimg.php";?>‘; var suess_url = ‘<?php echo $_SESSION["base_site_url"]."/temp/html/activity.html" ?>‘; $.ajax({ type: "POST", async:true, url:url , dataType: ‘json‘, data: data, success: function(msg){ if(msg.stat==1){ window.location.href=suess_url; }else { alert("图片保存失败,请重试:" + msg.path); return false; } } }); return false; } }); $(‘#upload_btn‘).click(function(){ chooseImage(); }) }); function chooseImage(){ // 选择张片 wx.chooseImage({ count: 1, // 默认9 success: function(res) { var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 $("#my_img").attr(‘src‘, localIds); // 上传照片 upload_img(); function upload_img(){ wx.uploadImage({ localId: ‘‘ + localIds, isShowProgressTips: 1, success: function(res) { serverId = res.serverId; $("#upload_img_val").val(serverId); // 把上传成功后获取的值附上 } }); } } }); }</script></html>
ajax下载微信服务器上的图片到本地保存
<?phpsession_start();downlodimg();function downlodimg(){ $serverId = trim($_POST[‘img_id‘]); $access_token = trim($_POST[‘access_token‘]); if(empty($serverId) || empty($access_token)){ exit(json_encode(array(‘stat‘=>0))); } $targetName = $_SESSION[‘open_id‘].‘.jpg‘; $save_path = $_SERVER["DOCUMENT_ROOT"].‘/data/upload_img/‘.$targetName; $url="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$serverId}"; $raw = file_get_contents($url); file_put_contents($save_path,$raw); if(file_exists($save_path)){ exit(json_encode(array(‘stat‘=>1))); } else { die(json_encode([‘stat‘ => 0, ‘path‘ => $save_path])); }}
下面给出一个获取微信相关信息的接口类
<?phpclass JSSDK { private $appId; private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); // 注意 URL 一定要动态获取，不能 hardcode. $protocol = (!empty($_SERVER[‘HTTPS‘]) && $_SERVER[‘HTTPS‘] !== ‘off‘ || $_SERVER[‘SERVER_PORT‘] == 443) ? "https://" : "http://"; if(ip2long($_SERVER[‘HTTP_HOST‘])) { $_SERVER[‘HTTP_HOST‘] = $_SERVER[‘SERVER_NAME‘]; } $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; } private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } private function getJsApiTicket() { // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例 $file_name=$_SERVER["DOCUMENT_ROOT"].‘/data/token/jsapi_ticket.json‘; $data = json_decode(file_get_contents($file_name)); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); // 如果是企业号用以下 URL 获取 ticket // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken"; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $fp = fopen($file_name, "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $ticket = $data->jsapi_ticket; } return $ticket; } public function getAccessToken(){ $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $token_file = $_SERVER["DOCUMENT_ROOT"].‘/data/token/access_token.txt‘; if(!file_exists($token_file)||(filemtime($token_file)+7200)<time()){ $token_str = $this->httpGet($url); $token_arr = json_decode($token_str); if(($token_arr->access_token)!=‘‘){ file_put_contents($token_file, $token_arr->access_token); } } $token = file_get_contents($token_file);//此行不要删 $getip_url="https://api.weixin.qq.com/cgi-bin/getcallbackip?access_token="; //echo $getip_url.$token; $ip_json = $this->httpGet($getip_url.$token); $ip_json_arr = json_decode($ip_json,true); if($ip_json_arr["errcode"]==‘40001‘||$ip_json_arr["errcode"]==‘41001‘){ //如果失效 $token_str = $this->httpGet($url); $token_arr = json_decode($token_str); if(($token_arr->access_token)!=‘‘){ file_put_contents($token_file, $token_arr->access_token); } } $token=file_get_contents($token_file); return $token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; } /** * 是否是微信打开 * */ public function is_wx_pro(){ $user_agent = $_SERVER[‘HTTP_USER_AGENT‘]; if (strpos($user_agent, ‘MicroMessenger‘) === false) { // 非微信浏览器禁止浏览 return false; } else { // 微信浏览器，允许访问 //preg_match(‘/.*?(MicroMessenger\/([0-9.]+))\s*/‘, $user_agent, $matches);//echo "MicroMessenger"; //echo ‘<br>Version:‘.$matches[2];// 获取版本号 return true; } }}
一个完整的微信上传图片下载图片实例,把手把教学
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。