一.首先在common.js里封装一个函数,在急需调用jsSDK的页面引用此措施就可以实现微信的消息配置

方今微信公开了一些接口,在那之中有壹个uploadImage接口用于上传图片,一般和chooseImage接口协作使用。先调用chooseImage接口让用户挑选一张大概多张图片,用户采用停止后微信会重临被选中图片的id,再把图片id传给uploadImage接口上传图片。

function signatureJSSDK() {
 var url = window.location.href.split('#')[0];//后台需要此页面的url来生成参数
 $.ajax({
 url:IPWeiXinJssdk,//调用后台接口,用后台返回的结果来进行微信接口的基础配置
 type:"post",
 dataType:"json",
 data:{"url":url},
 success:function (result) {
  if (result) {
         //后台接口调用成功,开始配置微信
  wx.config({
   debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
   appId : result.appid, // 必填,公众号的唯一标识
   timestamp : result.timestamp, // 必填,生成签名的时间戳
   nonceStr : result.noncestr, // 必填,生成签名的随机串
   signature : result.signature,// 必填,签名,见附录1
   jsApiList : [// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
   /*
    * 所有要调用的 API 都要加到这个列表中
    * 这里以图像接口为例
    */
   "chooseImage",
   "previewImage",
   "uploadImage",
   "downloadImage" ]
  });
  }
 }
 })
}
//微信配置失败会执行wx.error函数
wx.error(function(res) {
 confirmBox2("wx.config.error");
 console.log(res);
});

那二日做的叁个种类,刚好用到了JSSDK,把用到的东西收拾下。

二.在供给动用微信多图上传的页面编写如下代码

先附上微信开采者文档链接:微信开采者文书档案

$(function () {
 signatureJSSDK();//微信jssdk配置
 // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
 // 也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
 wx.ready(function() {//微信配置成功执行此函数
         //localIdsArr 用来存放localIds,serverIdsArr用来存放serverIds
  var localIdsArr = [];var serverIdsArr = [];
  $(".BImgContent").click(function () {//点击事件触发微信拍照
  var that = $(this);
  wx.chooseImage({//调用微信拍照功能
   count: 1, // 默认9
   sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
   sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
   success: function(res) {
   localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
   $(that).find(".ago").attr('src', localIds);//本地预览,localIds可以当做img标签的src属性
   wx.uploadImage({//用户预览的同时,上传至微信服务器
    localId:""+localIds,
    success: function(res) {
    var i =0;
    if($(that).hasClass("img1")){
     i = 1;
    }else if($(that).hasClass("img2")){
     i = 2;
    }else if($(that).hasClass("img3")){
     i = 3;
    }
    localIdsArr[i] = localIds;//将此图片的localIds存入数组
    serverIdsArr[i] = res.serverId;//将此图片在微信服务器上的werverID存入数组
    }
   });
   }
  });
  });
  $("#nextStep").click(function () {//用户点击下一步时,调用后台接口,传给后台serverIdsArr,后台可通过此id从微信服务器下载这些图片到后台
  var flag = 0;
  $(".ago").each(function (index,val) { //判断前台页面需要上传的部分是否都上传完
   var localIds = $(val).attr("src");
   if(localIds === "./img/photoAddContent1.png"){
   flag = 1;
   return false;
   }
  }); 
  if(flag === 0){//验证通过,传送serverID至后台
//   alert("开始发送serverID至后台");
   $(this).unbind("click");
   for(var i=0;i<serverIdsArr.length;i++){
   pushSeverId(serverIdsArr[i]);
   }
  }else{
   confirmBox2("请完善以上资料");
  }
  });
 });
 //将serverId发至后台,后台从微信服务器下载图片,然后反馈图片在我们服务器上的相对路径
 var urlList = [];
 function pushSeverId(serverId) {
  $.post('http://XXX.XXX', { serverId: serverId },function (text, status) {
  var obj = {"imgStr":"","imgType":""};
  obj.imgStr = text;//text为后台返回的图片url
  urlList.push(obj);
//  alert(JSON.stringify(urlList));//可以在手机上打印此数组,调试用,看看是否全部上传成功
  });
 }
 })

关键行使了:

  以上是本身在选择微信jssdk,达成多图上传的代码,因为各种人的须要不尽一样,有的某个代码被本人删除,希望能帮到大家!假设大家有其余疑问请给自身留言,作者会及时回复我们的。在此也极其感激大家对台本之家网址的支撑!

永利开户送38元体验金,引入JS文件

你大概感兴趣的稿子:

  • 微信分享调用jssdk实例
  • 详解nodejs微信jssdk后端接口
  • php二个文书解决微信jssdk配置
  • 微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验战败难题消除
  • 微信jssdk用法汇总
  • 微信JSSDK多图片上传并且消除IOS系统上传向来加载的主题材料
  • 微信jssdk在iframe页面失效难题的消除方式
  • 微信JSSDK上传图片
  • 微信JSSDK调用微信扫一扫功效的不二秘诀

在急需调用JS接口的页面引进如下JS文件,(扶助https):

大家需求获得微信js-sdk参数

/** 
 * 获取access_token 
 *  
 * @param appid 
 *      凭证 
 * @param appsecret 
 *      密钥 
 * @return 
 */ 
public static WxAccessToken getAccessToken() { 
  WxAccessToken accessToken = null; 
  String requestUrl = access_token_url.replace("APPID", Setting.getSetting("WX_PL_APP_ID")).replace( 
      "APPSECRET", Setting.getSetting("APP_SECRET")); 
  JSONObject jsonObject = httpRequest(requestUrl, "GET", null); 
  // 如果请求成功 
  if (null != jsonObject) { 
    try { 
      accessToken = new WxAccessToken(); 
      accessToken.setToken(jsonObject.getString("access_token")); 
      accessToken.setExpiresIn(jsonObject.getInt("expires_in")); 
    } catch (JSONException e) { 
      accessToken = null; 
      // 获取token失败 
      log.error("获取token失败 errcode:{} errmsg:{}", 
          jsonObject.getInt("errcode"), 
          jsonObject.getString("errmsg")); 
    } 
  } 
  return accessToken; 
} 
public static String jsapiTicket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; 
/** 
 * 获取JsTicket 
 *  
 * @param accessToken 
 *      accessToken 
 * @return 
 */ 
public static WxJsTicket getJsTicket(String accessToken) { 
  WxJsTicket jsTicket = null; 
  String url = jsapiTicket.replaceAll("ACCESS_TOKEN", accessToken); 
  JSONObject jsonObject = httpRequest(url, "GET", null); 
  // 如果请求成功 
  if (null != jsonObject) { 
    try { 
      jsTicket = new WxJsTicket(); 
      jsTicket.setTicket(jsonObject.getString("ticket")); 
      jsTicket.setExpiresIn(jsonObject.getInt("expires_in")); 
    } catch (JSONException e) { 
      jsTicket = null; 
      // 获取token失败 
      log.error("获取jsapiTicket失败 errcode:{} errmsg:{}", 
          jsonObject.getInt("errcode"), 
          jsonObject.getString("errmsg")); 
    } 
  } 
  return jsTicket; 
} 

亟待专注接口的调用次数是有限量的,须要调节好。

页面包车型客车安插

wx.config({ 
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 
   appId: "$!{wxsign.get('appId')}", // 必填,公众号的唯一标识 
   timestamp: "$!{wxsign.get('timeStamp')}", // 必填,生成签名的时间戳 
   nonceStr: "$!{wxsign.get('nonceStr')}", // 必填,生成签名的随机串 
   signature: "$!{wxsign.get('signature')}",// 必填,签名,见附录1 
   jsApiList: ['checkJsApi', 
         'chooseImage', 
         'previewImage', 
         'uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 
 }); 

 var images = { 
  localId: [], 
  serverId: [] 
 }; 

拍录或从手提式无线电话机相册中选图接口

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
  }
});

上传图片接口

wx.uploadImage({
  localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得
  isShowProgressTips: 1, // 默认为1,显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回图片的服务器端ID
  }
});

微信再次回到的serverid大家供给通过微信api获取真实的图样二进制数据。

/** 
 * 获取媒体文件 
 *  
 * @param accessToken 
 *      接口访问凭证 
 * @param media_id 
 *      媒体文件id 
 * */ 
public static String downloadMedia(String mediaId,HttpServletRequest request) { 
  String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"; 
  requestUrl = requestUrl.replace("ACCESS_TOKEN", WxTokenThread.accessToken.getToken()).replace( 
      "MEDIA_ID", mediaId); 
  HttpURLConnection conn = null; 
  try { 
    URL url = new URL(requestUrl); 
    conn = (HttpURLConnection) url.openConnection(); 
    conn.setDoInput(true); 
    conn.setRequestMethod("GET"); 
    conn.setConnectTimeout(30000); 
    conn.setReadTimeout(30000); 
    BufferedInputStream bis = new BufferedInputStream( 
        conn.getInputStream()); 
    ByteArrayOutputStream swapStream = new ByteArrayOutputStream();  
    byte[] buff = new byte[100];  
    int rc = 0;  
    while ((rc = bis.read(buff, 0, 100)) > 0) {  
      swapStream.write(buff, 0, rc);  
    }  
    byte[] filebyte = swapStream.toByteArray();  
    return PictureStore.getInstance().getImageServerUrl() + PictureStore.getInstance().store(filebyte); 
  } catch (Exception e) { 
    e.printStackTrace(); 
  } finally { 
    if(conn != null){ 
      conn.disconnect(); 
    } 
  } 
  return ""; 
} 

完整上做这么些意义依然相比较轻巧的,只然而从前并未有接触过微信api。

微信 jssdk 上传多张图纸

代码如下:

jssdk

$('#filePicker').on('click', function () {
 wx.chooseImage({
  success: function (res) {
   var localIds = res.localIds;
   syncUpload(localIds);
  }
 });
});
var syncUpload = function(localIds){
 var localId = localIds.pop();
 wx.uploadImage({
  localId: localId,
  isShowProgressTips: 1,
  success: function (res) {
   var serverId = res.serverId; // 返回图片的服务器端ID
   //其他对serverId做处理的代码
   if(localIds.length > 0){
    syncUpload(localIds);
   }
  }
 });
};

正文给大家享受了微信JSSDK上传图片的措施,希望对我们从此的行事学习抱有帮助,当然方法也频频上述一种,还应该有十分多,招待咱们多多分享温馨的阅历。

你大概感兴趣的稿子:

  • 微信分享调用jssdk实例
  • 详解nodejs微信jssdk后端接口
  • 有关微信jssdk完毕多图片上传的一些体会分享
  • php多少个文书解决微信jssdk配置
  • 微信+angularJS的SPA应用中用router举办页面跳转,jssdk校验战败难点消除
  • 微信jssdk用法汇总
  • 微信JSSDK多图片上传并且化解IOS系统上传向来加载的主题材料
  • 微信jssdk在iframe页面失效难点的化解方式
  • 微信JSSDK调用微信扫一扫效率的办法

相关文章