调用微信上传图片的接口

---恢复内容开始---

<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();
        }
    }
};

 

---恢复内容结束---

转载于:https://www.cnblogs.com/clwhxhn/p/6688571.html