关于微信jssdk实现多图片上传的一点心得分享


Posted in Javascript onDecember 13, 2016

一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置

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

二.在需要使用微信多图上传的页面编写如下代码

$(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,实现多图上传的代码,因为每个人的需求不尽相同,有的部分代码被我删除,希望能帮到大家!如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
浅谈javascript的调试
Jan 28 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
vue.js循环radio的实例
Nov 07 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 #Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 #Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 #Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 #Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 #Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
Dec 13 #Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 #Javascript
You might like
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jquery图片切换插件
2015/03/16 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
vue 插件的方法代码详解
2019/06/06 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
python爬虫面试宝典(常见问题)
2018/03/02 Python
python看某个模块的版本方法
2018/10/16 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
骨干教师培训制度
2014/01/13 职场文书
初婚未育证明
2014/01/15 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年党总支工作总结
2015/05/25 职场文书
新学期开学标语2015
2015/07/16 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python