一个微信上传图片的html实例

<?php include 'header.php'; ?>
<style>
    .o-mis-bx-table-hd td{
        display: inline-block;
        margin: 5px;
    }
    .omis-pub2-table td{
        padding: 2%;

    }
</style>

<!--预览-->
<div id="img"></div>

<form action="<?=Yii::$app->urlManager->createUrl('/Wxmsg/wximg/doadd');?>" method="post">
 <input type="hidden" name="media_id" id="media_id" value=""/>
 <input type="button" value="拍照" class="weui-qrcod-btn" id="start_qrcode_id"/>
 <input type="submit" value="提交" class="weui-qrcod-btn" id="submit"/>
</form>
<?php include 'footer.php'; ?>
<script type="application/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>
    var localIds = 0;
    //通过config接口注入权限验证配置
    wx.config({
        beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // true开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '<?=$config['appId'];?>', // 必填，企业微信的corpID
        timestamp: <?=$config['timestamp'];?>, // 必填，生成签名的时间戳
        nonceStr: '<?=$config['nonceStr'];?>', // 必填，生成签名的随机串
        signature: '<?=$config['signature'];?>',// 必填，签名，见附录1
        //jsApiList: [<?=json_encode($config['jsApiList']);?>]
        jsApiList: ['uploadImage','getLocalImgData','scanQRCode','chooseImage']//必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    wx.ready(function () {
        $("#start_qrcode_id").click(function () {
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有'album', 'camera'
                defaultCameraMode: "batch", //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。（注：用户进入拍照界面仍然可*切换两种模式）
                isSaveToAlbum: 0, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
                success: function (res) {
                    var images = [];
                    var ioslocId = []; //images与ioslocaId移到此处,保证只保留一张图片
                    var rows = '';
                    localIds = res.localIds; // 返回选定照片的本地ID列表，
                    images.push(localIds);
                    if (window.__wxjs_is_wkwebview) { //判断ios是不是用的 wkwebview 内核
                        for (var i = 0; i < localIds.length; i++) {
                            wx.getLocalImgData({ //循环调用 getLocalImgData
                                localId: localIds[i],
                                // 图片的localID
                                success: function(res) {
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    localData = localData.replace('jgp', 'jpeg'); //iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
                                    ioslocId.push(localData);
                                    rows = "";
                                    for (var j = 0; j < ioslocId.length; j++) {
                                        rows += `<img src="` + ioslocId[j] + `" width="100%" height="30%"/>`;
                                    }
                                    $("#img").html(rows);
                                },
                                fail: function(res) {
                                    alert("res");
                                }
                            });
                        }
                    } else {
                        //如果不是用的wkwebview内核或者是用的安卓系统
                        $.each(images, function(index, el) {
                            rows += `<img src="` + el + `" width="100%" height="30%"/>`;
                            });
                        $("#img").html(rows);
                    }

                    //上传图片到微信服务器
                    for (var i = 0; i < localIds.length; i++) {
                        wx.uploadImage({
                            localId: localIds[i], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 0, // 默认为1，显示进度提示
                            success: function (res) {
                                //因这里只保存一张所以直接赋值，多张请自行处理为字符串
                                var serverId = res.serverId; // 返回图片的服务器端ID,即素材的media_id
                                $('#media_id').val(serverId);
                            }
                        });
                    }
                 },
                error: function (res) {
                    alert(res);
                    if (res.errMsg.indexOf('function_not_exist') > 0) {
                        $.dialog.tips('版本过低请升级', '2' , 'error.gif');
                        return false;
                    }
                }
            });
        });
    });

    //提交验证
    $('#submit').click(function () {
        var media_id = $('#media_id').val();
        if (!media_id) {
            $.dialog.tips('请拍照上传', '2' , 'error.gif');
            return false;
        }
        var url = '<?=Yii::$app->urlManager->createUrl('/Wxmsg/wximg/doadd');?>';
        $.ajax({
            url : url,
            type : "POST",
            dataType : "json",
            data : {'media_id' : media_id},
            success : function (res) {
                if (res.status == 1) {
                    $.dialog.tips(res.info, '2' , 'success.gif');
                    if (isAndroid()) {
                        document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false)
                    } else if(isIos) {
                        WeixinJSBridge.call('closeWindow');
                    }
                } else {
                    $.dialog.tips(res.info, '2' , 'error.gif');
                }
            }
        });
        return false;
    });


    // 判断安卓
    function isAndroid() {
        var u = navigator.userAgent;
        if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
            if (window.ShowFitness !== undefined) return true;
        }
        return false;
    }
    // 判断设备为 ios
    function isIos() {
        var u = navigator.userAgent;
        if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
            return true;
        }
        return false;
    }

</script>