微信公众号上传图片接口

来源:互联网 发布:多用户自助建站源码 编辑:程序博客网 时间:2024/05/02 12:05

需要配置apppid等,先初始化。

window.onload=function(){ //用window的onload事件,窗体加载完毕的时候
url=location.href.split('#')[0];
var type = $('[name="LoanFormMap.evaluate_type"]').find("option:selected").text();

if(type.indexOf('信用贷')!=-1){
xyflag=true;
$("#dkqx").html("贷款期限:");
$('[name="LoanFormMap.loanterm"]').attr("placeholder","请输入贷款期限");


$.ajax({
type: "POST",
url:"${pageContext.request.contextPath}/wechat/inquiry/getSignatureForWx.shtml", 
dataType : "json",
data:{
appid:"${appid}",
url:url
},
success: function(data) {
var timestamp = data.timestamp;  
                var noncestr = data.noncestr;  
                var signature = data.signature;  
                 
wx.config({
        debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: data.appid ,  // 必填,公众号的唯一标识
        timestamp: data.timestamp, // 必填,生成签名的时间戳
        nonceStr: data.nonceStr, // 必填,生成签名的随机串
        signature: data.signature,// 必填,签名,见附录1
      //  jsApiList: ['checkJsApi', 'chooseImage','getLocalImgData'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    jsApiList: ['chooseImage','uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
}
}); 
 
wx.ready(function(){  
      //...
}); 
      
      wx.error(function(res){
//...
    });
}


初始化过后,使用wx.chooseImage上传图片

function imagefun(jid){
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
            $('#'+jid).attr('src', localIds);
         
       wx.uploadImage({
         localId: localIds.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得 
        isShowProgressTips: 1, // 默认为1,显示进度提示
 
         success: function (res) {
             var serverId = res.serverId; // 返回图片的服务器端ID
          var name=$("#"+jid).attr("name");
             $("#"+jid).addClass("uploading");
             
         $.ajax({
    type: "POST",
    url:"${pageContext.request.contextPath}/wechat/inquiry/uploadfile.shtml", 
    dataType : "json",
    data:{
    code:"${business_code}",
    type:name,
    subtype:name,
    mediaId:serverId,
    url:url,
    objid:$("#objid").val()
    },
  success: function(data) {
    $("#"+jid).removeClass("uploading");
    if(null==data){
  $("#"+jid).attr("src","");
  layer.alert('图片上传失败,请重新上传');
  }else{
  $("#"+jid).addClass("upload");
  }
    }
         });  
         }
      });    
        }
    });
     }



<div style="margin-top: 15px;text-align: center;">
    <img class="objfile"  style="margin-left:1.5em;width:290px;height: 166px;" name="房地产证" filename="房地产证" 
    width="285px;" height="250px;" src="${pageContext.request.contextPath}/images/wechat/loan/ygd2_01.png" alt="" 
    id="objgtgy2" onclick="imagefun('objgtgy2');"/>
    <div style="text-align:center">共同共有2</div> 
  </div>


阅读全文
1 0