zoukankan      html  css  js  c++  java
  • 微信jssdk上传图片,一张一张的上传 和 一次性传好几张

    //html模板
    
    <div class="zhaopin_3_2">
                <div id="bbb"></div>
                <img src="/Public/Home/images/jia.png" class="avatar-round1">
            </div>
    复制代码

    此方法是一次可多张上传

    复制代码
    //js控制
    
        
    {:wx_jssdk_config("false")}
    <script>
            var headimgurl;
            var y=0;
            var i =0;
            $('.avatar-round1').click(function(){
                if(y<5){
                    var html = $('#bbb').html();
                    wx.chooseImage({
                        count: 5-i,
                        success: function (res) {
                            var localIds = res.localIds;
                            syncUpload(localIds);
                        }
                    });
                    
                    var syncUpload = function(localIds){
                        var localId = localIds.pop();
                        wx.uploadImage({
                            localId: localId,
                            isShowProgressTips: 1,
                            success: function (res) {
                                i++;
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                html += '<div class="uploadImg img"><div class="close"><img src="__HOME__/images/close.png" onclick="del_imgy(this);"> </div>'+
                                            '<img src="'+localId+'"/><input type="hidden" name="image[]" value="'+serverId+'"></div>';
                                //其他对serverId做处理的代码
                                if(localIds.length > 0){
                                    syncUpload(localIds);
                                }else{
                                    $('#bbb').html(html);
                                }
                            }
                        });
                    }; 
                } 
            });    
    
    function del_img(dom){
        $(dom).parents('.uploadImg').remove();
    }
    </script>
    复制代码

    //此方法可一张一张的上传

    复制代码
    {:wx_jssdk_config("false")}
    <script>
            var headimgurl;
            $('.avatar-round1').click(function(){
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                    success: function(res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                        // 上传照片
                        wx.uploadImage({
                            localId: '' + localIds,
                            isShowProgressTips: 1,
                            success: function(res) {
                                serverId = res.serverId;
                                $(localIds).each(function(index, el) {
                                    iii=localIds[index];
    
                                });
                                var html = $('#bbb').html();
                                html += '<div class="uploadImg img" id="tuji"><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this);"> </div>'+
                                    '<img src="'+iii+'"><input type="hidden" name="image[]" value="'+serverId+'"></div>';
                                $('#bbb').html(html);
                            }
                        });
                    }
                });
            });
    
    
    function del_img(dom){
    
                $(dom).parents('.uploadImg').remove();
    
    }
     </script>
    复制代码

    下面使用的方法都是一样的

    复制代码
    //封装的方法
    //我的是放在  function.php文件里
    
    //下面这两个方法需要用到微信的配置
    
    /**
     * 直接生成微信jssdk_config
     * @echo string $jssdk Jssdk_config
     * @author 5heAtMin9 <sheatming@foxmail.com>
     */
    
    function wx_jssdk_config($debug='true'){
        $getSignPackage = wx_getSignPackage();
        $jssdk = '<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>';
        $jssdk .= '<script>
        wx.config({
            debug: '.$debug.', 
            appId: "'.$getSignPackage['appId'].'",
            timestamp: "'.$getSignPackage['timestamp'].'",
            nonceStr: "'.$getSignPackage['nonceStr'].'",
            signature: "'.$getSignPackage['signature'].'",
            jsApiList: ["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ", "onMenuShareWeibo","onMenuShareQZone","hideMenuItems","showMenuItems","hideAllNonBaseMenuItem","showAllNonBaseMenuItem","translateVoice","startRecord","stopRecord","onVoiceRecordEnd","playVoice","onVoicePlayEnd","pauseVoice","stopVoice","uploadVoice","downloadVoice","chooseImage","previewImage","uploadImage","downloadImage","getNetworkType","openLocation","getLocation","hideOptionMenu","showOptionMenu","closeWindow","scanQRCode","chooseWXPay","openProductSpecificView","addCard","chooseCard","openCard"],
        });
    </script>';
        echo $jssdk;
    }
    
    
    
    
    //控制器里需要用到此方法
    /** * 保存图片、视频、语音消息 * @param string $media_id 素材ID * @param string $save_path 保存路径 * @return string $return 返回jpg文件路径 * @author 5heAtMin9 <sheatming@foxmail.com> */ function wx_msg_save_file($media_id, $msgtype, $save_path='./Uploads/Wechat/') { switch($msgtype){ case 'image': $save_path .= 'image/'; $ex = '.jpg'; break; case 'video': $save_path .= 'video/'; $ex = '.mp4'; break; case 'voice': $save_path .= 'voice/'; $ex = '.amr'; break; default : return '参数错误'; break; } if(!is_dir($save_path)){ mkdir($save_path); } $url = 'http://file.api.weixin.qq.com/cgi-bin/media/get?access_token='.wx_get_access_token() -> access_token.'&media_id='.$media_id; $filename = $msgtype."_".rand(1111,9999).time().$ex; downAndSaveFile($url,$save_path.$filename); $ready_upload = $save_path.$filename;// 文件在本地的位置 return $ready_upload; }
    复制代码
    复制代码
    //在控制器里需要这样用
    
    if(I('image')!=''){
                    foreach(I('image') as $k=>$v){
                        $aa[$k]=wx_msg_save_file($v, 'image');
                    }
                    $_POST['picture']=implode(',',$aa);
                }
    复制代码
  • 相关阅读:
    Android学习笔记(四十):Preference的使用
    怎样在小方框上打对号 小方框内打对勾 word 方框打对勾
    PreTranslateMessage作用和用法
    MyBatis与Spring设置callSettersOnNulls
    EJB3.0开发环境的搭建
    经常使用虚拟现实仿真软件总汇(zz)
    slf自己主动绑定实现类过程推断
    DLNA介绍(包含UPnP,2011/6/20 更新)
    从技术到管理的问题
    NOI第一天感想&小结
  • 原文地址:https://www.cnblogs.com/yelanggu/p/8627629.html
Copyright © 2011-2022 走看看