• 微信js sdk上传多张图片


    微信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&timestamp=$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);
            }
  • 相关阅读:
    Javascript 智能输入数字且保留小数点后三位
    dedecms 在模版页面获取当前栏目id
    photoshop打开图片显示的是索引,无法编辑解决
    Mac+Apache+PHP 安装 Xdebug 方法
    dedecms 模版里格式化时间标签
    input中只能写入数字int、float
    dedecmsv5.7 前台模版里输出变量
    Dedecms V5.7 关于session
    JQuery 获取select被选中的value和text
    如何使用Anaconda
  • 原文地址:https://www.cnblogs.com/xqschool/p/6857691.html
Copyright © 2020-2023  润新知