关于微信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 实现双色表格实现代码
Nov 24 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
微信页面倒计时代码(解决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 number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
python图像处理入门(一)
2019/04/04 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
用Python实现职工信息管理系统
2020/12/30 Python
Python中的面向接口编程示例详解
2021/01/17 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
《猴子种树》教学反思
2014/02/14 职场文书
大学班级计划书
2014/04/29 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
乌镇导游词
2015/02/02 职场文书
办公室禁烟通知
2015/04/23 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
详解Python flask的前后端交互
2022/03/31 Python