一个完整的微信上传图片下载图片实例,把手把教学

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

  1. success：接口调用成功时执行的回调函数。
  2. fail：接口调用失败时执行的回调函数。
  3. complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。
  4. cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
  5. trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。

以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

  1. 调用成功时："xxx:ok" ，其中xxx为调用的接口名
  2. 用户取消时："xxx:cancel"，其中xxx为调用的接口名
  3. 调用失败时：其值为具体错误信息

基础接口

判断当前客户端版本是否支持指定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>您选择了&nbsp;您与玫瑰</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下载微信服务器上的图片到本地保存

<?php
session_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]));
    }
}

下面给出一个获取微信相关信息的接口类

<?php
class 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&timestamp=$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;
        }
    }
}
时间： 2024-10-05 14:01:59

一个完整的微信上传图片下载图片实例,把手把教学的相关文章

AsyncTask工具类的使用-真实下载图片实例

转载请标明出处:http://blog.csdn.net/blackzhangwei/article/details/51922640 谢谢! 什么是AsyncTask? AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口实现UI进度更新),最后反馈执行的结果给UI主线程. 实现一个异步任务可以使用Handler+线程,Android给我们提供了另一种更轻量级的实现方法就是使用AsyncTa

java 微信服务器下载图片到自己服务器

/** * @author why * */ public class PicDownload { /** * * 根据文件id下载文件 * * * * @param mediaId * * 媒体id * * @throws Exception */ public static InputStream getInputStream(String accessToken, String mediaId) { InputStream is = null; String url = "http://f

scrapy下载图片第一波

scrapy的图片管道,在ImagePipeline类中实现 ,提供了一个方便并具有额外特性的方法,来下载并本地存储图片: * 将所有下载的图片转换成通用的格式(JPG)和模式(RGB) * 避免重新下载最近已经下载过的图片 * 缩略图生成 * 检测图像的宽/高,确保它们满足最小的限制 这个管道也会为那些当前安排好要下载的图片保留一个内部队列,并将那些到达的包含相同图片的项目连接到那个队列中. 这可以避免多次下载几个项目共享的同一个图片. Pillow是用来生成缩略图,并将图片归一化为JPEG/

微信选择图片、上传图片、下载图片、扫一扫接口调用源码

1.添加微信js引用: <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 2.Html示例代码 <div style="margin: 200px 0px 0px 200px;"> <button id="chooseImage" class=&quo

一个失误导致微信下载图片接口Token失效

公司的应用调了一个微信上传下载图片的接口,本来在线上跑的好好的,什么问题没有,但是这两天总是不定时的出现下载下来的图片损坏,拿着Token和serverid去接口测试网页验证,返回的是Token失效了,返回信息:"errcode": 40001, "errmsg": "invalid credential, access_token is invalid or not latest hint: [17ZG50664ent3].我是把Token和ticket

微信开发之调起摄像头、本地展示图片、上传下载图片

之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片. 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.config({ /* debug: true, */ appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'chooseImage',//拍照或从手机相册中选图接口

[转]一个完整的Installshield安装程序实例

Installshield安装程序实例—基本设置一 前言 Installshield可以说是最好的做安装程序的商业软件之一,不过因为功能的太过于强大,以至于上手和精通都不是容易的事情,之前都是用Installshield的Project Assistant对付过去的,这次做这个安装程序,为了实现一些功能,必须写代码,国内外现成的资料很少,而且很多都语焉不详,自己反复啃了多次,对比Installshiel自带的help,才明白资料所表达的意思.这个安装程序虽然比较简陋,在行家眼里可能是小菜一碟,但

一个完整的Installshield安装程序实例—艾泽拉斯之海洋女神出品（三） --高级设置一

原文:一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(三) --高级设置一 上一篇:一个完整的安装程序实例—艾泽拉斯之海洋女神出品(二) --基本设置二 第二部分:脚本编程 在开始进行编程前,我们先明确一下我们要用编程来弥补前面设置的哪些功能的不足 1. 显示软件许可协议 2. 判断是否安装了本软件所需要的先决软件JKD1.6.0_04,如无,则启动外部安装程序进行安装(同样原理可以用来判断是否安装了其他软件,只要该软件在注册表中有键值) 3. 用户的输入信息.所选安装

一个完整的Installshield安装程序实例-转

一个完整的Installshield安装程序实例-艾泽拉斯之海洋女神出品(一)---基本设置一 前言 Installshield可以说是最好的做安装程序的商业软件之一,不过因为功能的太过于强大,以至于上手和精通都不是容易的事情,之前都是用Installshield的Project Assistant对付过去的,这次做这个安装程序,为了实现一些功能,必须写代码,国内外现成的资料很少,而且很多都语焉不详,自己反复啃了多次,对比Installshiel自带的help,才明白资料所表达的意思.这个安装程