微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能

html

<!--上传图片-->
                <div class="upload-mod">
                     <div class="up-box" id="upImg">
                        <img src="__HOME__/images/03-02-01.png " alt="" class="btn_dianji"/>
                     </div>
                </div>

 

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.2.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;
}

 

js  此图片上传功能在华为手机号有点bug  比如我一次上传9张图片，但是只给显示1到2张图片

{:wx_jssdk_config("false")}
 
<script>
        var i=0;
        var arr_pic = [];
        var arr_pic_2 = [];
        $('.btn_dianji').click(function(){
            if(i<10){
                var html = "";
                wx.chooseImage({
                    count: 9-i,
                    success: function (res) {
                        var localIds = res.localIds;
                        syncUpload(localIds);
                    }
                });
                var syncUpload = function(localIds){
                    var localId = localIds.shift();
                    wx.uploadImage({
                        localId: localId,
                        isShowProgressTips: 1,
                        success: function (res) {
                            i++;
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            arr_pic.push(localId);
                            arr_pic_2.push(serverId);
                            //其他对serverId做处理的代码
                            var $dom = $(html);
                            
                            paixu();
                            if(localIds.length > 0){
                                syncUpload(localIds);
                            }
                            if(i >=9){
                                $("#upImg").hide();
                                $("#upVideo").hide();
                            }
                        }
                    });
                };
            }
        });
        /*处理图片上传排序问题*/
        function paixu(){
            var m = arr_pic.length;
            var html = "";
            for(var k= m-1 ;k>-1;k--){
                html += '<div class="up-box " ><img src="'+arr_pic[k]+'" class="img"/><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this)"> </div><input type="hidden" name="image[]" value="'+arr_pic_2[k]+'"></div>';
                //m--;
            }
            var $dom = $(html);
            arr_pic = [];
            arr_pic_2 = [];
            $("#upImg").before($dom);
        }
        /*图片删除*/
        function del_img(dom){
            $(dom).parents('.up-box').remove();
            i--;
            if(i < 9){
                $("#upImg").show();
                if($("#upPreview").is(":hidden")){
                    $("#upVideo").show();
                }
            }
        }
/*调用微信预览图片的方法*/
        $('.upload-mod').on("click",".up-box .img",function(){
            var nowImgurl = $(this).attr("src");
            var imgs = [];
            var imgObj = $(".up-box .img");//这里改成相应的对象
            $.each(imgObj,function(index,el){
                imgs.push(imgObj.eq(index).attr("src"));
            });
            wx.ready(function(){
                wx.previewImage({
                    current: nowImgurl, // 当前显示图片的http链接
                    urls: imgs // 需要预览的图片http链接列表
                });
            });
        })
    </script>

 

js  第二个方法  上传一张显示一张图片 暂无bug

{:wx_jssdk_config("false")}
    <script>
      var i=0;
            $('#upImg').click(function(){
                if(i<10){
                    var html = '';
                    wx.chooseImage({
                        count: 9-i,
                        success: function (res) {
                            var localIds = res.localIds;
                            syncUpload(localIds);
                        }
                    });
                    var syncUpload = function(localIds){
                        var localId = localIds.shift();
                        wx.uploadImage({
                            localId: localId,
                            isShowProgressTips: 1,
                            success: function (res) {
                                i++;
//                                    alert(localIds.length);
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                html ='';
                                html += '<div class="up-box " ><img src="'+localId+'" class="img"/><div class="close"><img src="__HOME__/images/close.png" onclick="del_img(this)"> </div><input type="hidden" name="image[]" value="'+serverId+'"></div>';
                                //其他对serverId做处理的代码
                                var $dom = $(html);
                                
                                $("#upImg").before($dom);
                                
                                if(localIds.length > 0){
                                    setTimeout(function(){
                                        syncUpload(localIds);
                                    },500);
                                    
                                }
                                if(i > 8){
                                    $("#upImg").hide();
                                }

                            }
                        });
                    };
                }
            });
    </script>
    <script>
        /*图片删除*/
        function del_img(dom){
            $(dom).parents('.up-box').remove();
            i--;
            if(i < 6){
                $("#upImg").show();
            }
        }
        /*调用微信预览图片的方法*/
        $('.upload-mod').on("click",".up-box .img",function(){
            var nowImgurl = $(this).attr("src");
            var imgs = [];
            var imgObj = $(".up-box .img");//这里改成相应的对象
            $.each(imgObj,function(index,el){
                imgs.push(imgObj.eq(index).attr("src"));
            });
            wx.ready(function(){
                wx.previewImage({
                    current: nowImgurl, // 当前显示图片的http链接
                    urls: imgs // 需要预览的图片http链接列表
                });
            });
        })

        
    </script>