1. 程式人生 > >微信jssdk上傳圖片,一張一張的上傳 和 一次性傳好幾張

微信jssdk上傳圖片,一張一張的上傳 和 一次性傳好幾張

pla can 參數錯誤 其他 屬性 使用 down pop menu

//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 <[email protected]>
 */

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 <[email protected]> */ 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);
            }

微信jssdk上傳圖片,一張一張的上傳 和 一次性傳好幾張