微信jssdk之微信浏览器上传图片

为了在公众号页面中上传图片，需要配置微信jssdk。

各项配置操作流程，请参照微信官网：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115；

为了提高代码复用性，封装了一下上传图片类：

<?php

class WxUploadImg{

    //1.获取access_token,7000秒内，读取文件存档，否则重新获取

    function get_access_token_and_jsticket($appid,$appsecret){

        $file_addr='./server/cache.text';

        if(file_exists($file_addr)){

            $content=file_get_contents($file_addr);

            $content=json_decode($content);

            $access_token=$content->access_token;

            $jsticket=$content->jsticket;

            $time_limit=$content->time_limit;

            $arr['time_limit']=$time_limit;

            $arr['access_token']=$access_token;

            $arr['jsticket']=$jsticket;

            if(time()<= $time_limit){

                return $arr;

            }else{

                $file=fopen($file_addr,'w');

                $time_limit=time()+7000;

                $access_token=$this->get_new_access_token($appid,$appsecret);

                $jsticket=$this->get_jsticket($access_token);

                $arr=array();

                $arr['time_limit']=$time_limit;

                $arr['access_token']=$access_token;

                $arr['jsticket']=$jsticket;

                fwrite($file,json_encode($arr));

                fclose($file);

                return $arr;

            }

        }else{

            $file=fopen($file_addr,'w');

            $time_limit=time()+7000;

            $access_token=$this->get_new_access_token($appid,$appsecret);

            $jsticket=$this->get_jsticket($access_token);

            $arr=array();

            $arr['time_limit']=$time_limit;

            $arr['access_token']=$access_token;

            $arr['jsticket']=$jsticket;

            fwrite($file,json_encode($arr));

            fclose($file);

            return $arr;

        }

    }

    //随机字符串

    function make_nonceStr()  { 

         $codes=array();

        $codeSet = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';

        for ($i = 0; $i<16; $i++) {

            $codes[$i] = $codeSet[mt_rand(0, strlen($codeSet)-1)];

        }

        $nonceStr = implode($codes);

        return $nonceStr;

    }

    //缓存过期，获取新的access_token

    function get_new_access_token($appid,$appsecret){

   $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret;

        $rurl = file_get_contents($url);

        $rurl = json_decode($rurl,true);

        if(array_key_exists('errcode',$rurl)){

            return 'err1';

        }else{

            return $access_token = $rurl['access_token'];

        }

    }

    //2.获取jsticket

    function get_jsticket($access_token){

        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi"; // 两小时有效

        $rurl = file_get_contents($url);

        $rurl = json_decode($rurl,true);//var_dump($rurl);return;

        if($rurl['errcode'] != 0){

            return 'err2';

        }else{

            $jsticket = $rurl['ticket'];

            return $jsticket;

        }

    }

    //3.获取 signature

    function get_signature($jsticket,$timestamp,$noncestr,$url){

        $string1 = 'jsapi_ticket='.$jsticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url;

        return $signature = sha1($string1);

    }

}

前端：

插入页面的php代码，以便页面配置wx.config

最容易出错的是获取当前页面的完整url，参数一个不能少，可用

alert(location.href.split('#')[0])查看当前url;      

<?php
    include 'wx_upload_img.php';//引入封装类
    $wximg=new WxUploadImg();
    $timestamp = time();
    $appid='wxxxxxxxxxxx';
    $appsecret ="xxxxxxxxxxxxxxxxxxx";
    $url= 'http://wx.unair.cn/insure/etc_add.php?openid='.$_REQUEST['openid'];
    $noncestr=$wximg->make_nonceStr();
    $arr=$wximg->get_access_token_and_jsticket($appid,$appsecret);
    $access_token=$arr['access_token'];
    $signature=$wximg->get_signature($arr['jsticket'],$timestamp,$noncestr,$url);
?>      

js部分      

<script>
   
    //alert(location.href.split('#')[0])
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId:"<?php echo  $appid; ?>" , // 必填，公众号的唯一标识
        timestamp:"<?php echo  $timestamp; ?>" , // 必填，生成签名的时间戳
        nonceStr: "<?php echo  $noncestr; ?>", // 必填，生成签名的随机串
        signature: "<?php echo  $signature; ?>",// 必填，签名
        jsApiList: [
            'chooseImage',
            'uploadImage'
        ] // 必填，需要使用的JS接口列表
    });

    function chooseImage(obj){
        var id=$(obj).attr('id');
        // 选择张片
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function(res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
               // $(obj).attr('src', localIds);
                // 上传照片
                wx.uploadImage({
                    localId: '' + localIds,
                    isShowProgressTips: 1,
                    success: function(res) {
                        serverId = res.serverId;
                        $(obj).attr(id,serverId); // 把上传成功后获取的值附上
                        var img = '<img src="' +localIds+ '" style="width: 180px;height:130px;"/>';
                        $("#"+id).empty();
                        $("#"+id).append(img);//显示选中的图片
                        var url="http://wx.unair.cn/insure/server/download_wx_img.php";
                        $.get(url,{access_token:access_token,media_id:serverId},function (data) {
                           alert(data);//从微信服务器获取图片到本地，后台脚本就不提供了
                        });
                    }
                });
            }
        });
    }      

<html>部分      

<div class="main_in_input_image_label">请上传正反面身份证照片：</div>
<div οnclick="chooseImage(this)" id="idcardimg1" class="main_in_input_image_pit" style="float: left;">
    <span id="jiajia" style="font-size:105px;">+</span>
</div>