一個微信上傳圖片的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>