微信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);
            }