調用微信上傳圖片的接口

---恢復內容開始---

<div class="boxTitle loadPic"><button id="loadPic">上傳圖片</button></div>

點擊id為loadPic的元素(上傳圖片按鈕)，觸發loadPic函數：

function loadPic(e){
    if(isWechatBrow()==="wechat"){
        /*如果是微信瀏覽器,就注入微信jssdk*/
       wechatJsApi();
       //拍照或從手機相冊中選圖接口
       wx.chooseImage({
           count:5,//設置一次能選擇的圖片的數量 
           sizeType:['original','compressed'],//指定是原圖還是壓縮,默認二者都有
           sourceType:['album','camera'],//可以指定來源是相冊還是相機,默認二者都有
           success:function(res){   //微信返回了一個資源對象 
　　　　　　　　　//res.localIds 是一個數組　保存了用戶一次性選擇的所有圖片的信息　 　　　　　　　　
               images.localId=res.localIds;//把圖片的路徑保存在images[localId]中--圖片本地的id信息，用於上傳圖片到微信瀏覽器時使用
               her.upNum+=res.localIds.length; 
               ulLoadToWechat(0); //把這些圖片上傳到微信服務器 一張一張的上傳
            }
       });
    }else{
        //把上傳圖片的按鈕換成input type=file
    }
};

function wechatJsApi() {  //注入微信jssdk
    conf = getWechatConf('signature');
    wx.config({
        debug: false,
        appId: conf.appId,
        timestamp: conf.timestamp,
        nonceStr: conf.nonceStr,
        signature: conf.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',
            'openAddress'
        ]
    });
}

/**
 * 獲取微信配置
 */
function getWechatConf(e) {
    $.ajax({
        type: "POST",
        url: "/wechat/getConf/",
        data: {
            getVal: e,
            url: window.location.href
        },
        dataType: "json",
        async: false,
        success: function (d) {
            if (d.state) {
                ii = d.data.signature;
            } else {
                ii = d.msg;
            }
        },
        error: function (jqXHR) {
            ii = false;
            alert("發生錯誤,請咨詢公眾平台客服");
        }
    });
    return ii;
}

//上傳圖片到微信
function ulLoadToWechat(i){
    length = images.localId.length; //本次要上傳所有圖片的數量
    wx.uploadImage({
        localId: images.localId[i], //圖片在本地的id
        success: function (res) {//上傳圖片到微信成功的回調函數   會返回一個媒體對象  存儲了圖片在微信的id
            images.serverId.push(res.serverId);

            her.pic = wxImgDown(res.serverId);
            //上傳成功后 后台立馬把圖片從微信服務器上下載下來，返回圖片在本地服務器上的信息
              （具體內容和后台協調：這里返回的信息有圖片的url和圖片在本地服務器中的id）


            her.iid.push(her.pic.id); //把圖片在本地服務器中的id專門保存到一個數組當中
            
            her.sum++;
            if (her.sum <= 5) {
//                creatImg(her.pic.thumdfile);//縮略圖
                creatImg(her.pic.newpath,her.pic.id);//原圖  創建img便簽  將用戶選擇的圖片顯示在頁面中
            } else {
                alert('最多只能選擇5張圖片');
            }
            i++;
            
            if (i < length) {
                ulLoadToWechat(i);
            }
            
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });  
};

//下載上傳到微信上的圖片
function wxImgDown(sid){    
    $.ajax({   //后台下載
        type:"POST",
        url:"/wechat/wxImgDown",
        data:{
            sid:sid
        },
        dataType:"json",
        async: false,
        success:function(rel){
            if(rel.state){
                //alert(rel.data);//獲得圖片信息
//                alert(rel.data.id);//圖片在服務器上的id
//                alert(rel.data.thumdfile);//圖片在服務器上的
                her.arrPic=rel.data;//是個數組
//                iid=rel.data.id;
            }else{
                her.arrPic.thumdfile=false;
                alert('上傳圖片錯誤');
            }
        },
        erro:function(jqXHR){
            alert(jqXHR);
        }
    }).done(function(arrPic){
        return her.arrPic;
    });
    return her.arrPic;  //返回一個數組  保存圖片在本地服務器中的信息（url，id）
}

//創建img的方法
function creatImg(path,id) {
    if (her.sum <= 5) {
        
        var imgdiv= document.createElement('div');
        imgdiv.className="imgParent";
              
        var img = document.createElement('img');
        img.className += "ppp";
        $(img).attr('data-id',id);//給每個img添加一個data-id屬性,值為該圖片在數據庫中的id
        img.src = path;
        
        //創建 刪除小按鈕  定位在了每張圖片的左上角
        var delPicA=document.createElement('a');
        delPicA.innerHTML='X';
        delPicA.className="delPicAC";
        $(delPicA).attr('data-id',id);
        
        $(imgdiv).append(delPicA);  
        
        $(imgdiv).append(img);  
        $('.picPreview').append(imgdiv);
        
    } else {
        alert('最多只能選擇5張圖片');
    }

    her.srcArr.push(path);
}

用戶選擇好圖片后，顯示在頁面中，下一步就是：點擊圖片進行預覽

//用戶選好圖片后,點擊圖片進行預覽
$('.picPreview').on('click','img', function () {
    //調用預覽圖片的接口
    wx.previewImage({
        current: this.src,//當前顯示圖片的http連接
        urls: her.srcArr//需要預覽圖片的http連接列表
    });
});

或點擊圖片上的小叉號刪除已選擇的圖片（小叉號html中自己寫），是一個a便簽，有自定義屬性保存了圖片的id

//用戶點擊X 刪除圖片
$('.picPreview').on('click','a', function () {
    var id = $(this).attr('data-id');//每張圖片上都有一個自定義屬性保存了圖片在后台中的id
    if (confirm("確定刪除這張圖片嗎?")) {
        //刪除要傳后台中img的id 的數組中的數據
        for (var i = 0; i < her.iid.length; i++) {
            if (her.iid[i] == id) {
                her.iid.splice(i, 1);
            }
        }
        //刪除預覽
        $(this).parent().remove();
    }
});

最后的確定按鈕，把圖片發表出去的功能

//確定發表提問  獲得用戶發表的內容
function publishAsk(){
    var title=$('#ua-title').val();
    var question=$('#ua-question').val();
    var uimg=[];
    var eid=$('#eid').attr('data-id');
    for(var i=0;i<her.iid.length;i++){
        uimg.push(her.iid[i]); //只用向后台傳圖片在本地服務器上的id
    }
    function sc(){
        $.ajax({
                type:"POST",
                url:"/expert/require",
                data:{
                  title:title,
                  question:question,
                  img:uimg,
                  eid:eid
                },
                dataType:"json",
                async: false,
                success: function (data) {
                    if(data.state){
                        $('.askEBox').css('display','none');
                        alert("恭喜你,發表成功");
                        history.go(0);
                    }
                },
                erro:function (){
                    alert('發表失敗,請聯系管理員');
                }
            });
    }
    if((title=="") || (question=="")){
        alert('問題主題和問題描述必須填寫!');
    }else{
        if(her.iid.length==0){
            if(confirm('上傳圖片有助於行家更好的解決你的問題~')){
                return;
            }else{
                sc();
            }
        }else{//已經選擇了圖片
            sc();
        }
    }
};

 

---恢復內容結束---