关于微信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 相关文章推荐
重定向实现代码
Nov 20 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
js实现抽奖效果
Mar 27 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 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 魔术方法使用说明
2009/10/20 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
smarty模板数学运算示例
2016/12/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
python实现人脸识别代码
2017/11/08 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
详解python运行三种方式
2019/05/13 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
求职信范文怎么写
2014/01/29 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
诚信贷款承诺书
2014/05/30 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
单位租房协议书样本
2014/10/30 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python