微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信多图片上传必须挨个上传,也就是不能并行,得串行:
那么我们可以定义一个如下所示的上传函数:
var serverIds = []; function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader('正在提交数据...');
$('form').submit();
}
wx.uploadImage({
localId: localImagesIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
serverIds.push(res.serverId); // 返回图片的服务器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('上传失败,请重新上传!');
}
});
}
上传函数定义了,那么当点击图片框的时候,需要选择图片,定义如下:
//选择图片
$('#uploadImages img').on('click', function () {
var $img = $(this);
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
//$.alert(localIds[0]);
$img.attr('src', localIds[0]).addClass('uploaded');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
当用户选择了所有的图片之后,就需要上传图片了。这里就需要用到我们刚才定义的函数了,具体代码如下所示:
//提交事件
$('#btnSubmit').on('click', function () {
var $chooseImages = $('#uploadImages img.uploaded');
if ($chooseImages.length === 0) {
$.alert('请上传照片!');
return;
}
$.showPreloader('正在上传照片...');
var localImagesIds = [];
$chooseImages.each(function () {
localImagesIds.push($(this).attr('src'));
});
uploadImages(localImagesIds);
});
如上面代码所示,改处调用了函数uploadImages,然后将localImagesIds传递过来了。在uploadImages函数中,使用了递归,但一张图片上传完成后,就会再次调用本身,继续上传下一张图片,请注意以下关键代码:
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
serverIds.push(res.serverId); // 返回图片的服务器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('上传失败,请重新上传!');
}
});
这样,一切看起来是OK的,而且Android系统没有任何问题。但是,IOS却无法正常上传,一直会显示加载状态。代码反复检查,木有任何问题,那么肯定是微信的坑了。。。。
历经九九八十一难,终于找到解决办法:
var localId = localImagesIds[0];
//解决IOS无法上传的坑
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
uploadImages全部代码如下所示:
function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader('正在提交数据...');
$('form').submit();
}
var localId = localImagesIds[0];
//解决IOS无法上传的坑
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
wx.uploadImage({
localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
serverIds.push(res.serverId); // 返回图片的服务器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('上传失败,请重新上传!');
}
});
}
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题的更多相关文章
- 微信JS-SDK选择图片遇到的坑
微信JS-SDK选择图片遇到的坑 有个需求要在微信企业号里面做开发,有个功能是选择图片,使用input标签肯定是不管用了,Android手机上不能多选,所以使用了微信的JS-SDK提供的相关API,这 ...
- 解决网页中Waiting (TTFB)数据加载过慢的问题
解决网页中Waiting (TTFB)数据加载过慢的问题 最近做了一个网页,在本地测试良好,数据可以得到很快的反馈,但是当部署到云端Linux上时候,就会出现加载缓慢的问题.本地测试,得到数据大概3s ...
- JAR冲突问题的解决以及运行状态下如何查看加载的类
今天碰到群里小伙伴问,线上程序好像有多个不同版本的Netty包,怎么去看到底加载了哪一个? 在说如何看之前,先来说说,当你开始意识到项目里有多个不同版本的Jar包,都是因为遇到了这几个异常: java ...
- runloop是iOS系统上的actor模式
runloop是iOS系统上的actor模式(单线程派发的)
- 使用微信JSSDK实现图片上传
近期做的一个项目,刚好用到了JSSDK,把用到的东西整理下. 先附上微信开发人员文档链接:微信开发人员文档 主要用到了: 引入JS文件 在须要调用JS接口的页面引入例如以下JS文件.(支持https) ...
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- VB|xp风格:终于解决了“图片优化软件”在部分xp系统上无法启动的问题。
一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...
- 【上传AppStore】iOS项目上传到AppStore步骤流程(第三章) - 基本信息总汇
一.App ID(bundle identifier) App ID即Product ID,用于标识一个或者一组App. App ID应该和Xcode中的Bundle Identifier是一致(Ex ...
随机推荐
- ORACLE数据库存储结构
一.数据块 Oracle对数据库数据文件中的存储空间进行管理的单位是数据块.数据块是数据库中最小的(逻辑)数据单位,是最小的I/O单位.与数据块对应的,所有数据在操作系统级的最小物理存储单位是字节.每 ...
- 《C++编程规范:101条规则、准则与最佳实践》学习笔记
转载:http://dsqiu.iteye.com/blog/1688217 组织和策略问题 0. 不要为小事斤斤计较.(或者说是:知道什么东西不需要标准化) 无需在多个项目或者整个公司范围内强制实施 ...
- VC++ 将资源位图画到窗口上去的方法
第一种方法最简单:直接看代码 CImage img; img.LoadFromResource(AfxGetInstanceHandle(), IDB_BITMAP1); img.Draw(*pDc, ...
- mysql convert
SELECT id,boshidianshu,boshidianshu_shuzi,CONVERT(REPLACE(boshidianshu, '个', ''),SIGNED) aaa from lg ...
- hibernate学习(设计一对一 关系 映射)
//主表 package org.crazy.app.domain; import javax.persistence.*; @Entity @Table(name="person_inf& ...
- POJ 1696 - Space Ant 凸包的变形
Technorati Tags: POJ,计算几何,凸包 初学计算几何,引入polygon后的第一个挑战--凸包 此题可用凸包算法做,只要把压入凸包的点从原集合中排除即可,最终形成图形为螺旋线. 关于 ...
- win下搭建uvm环境
UVM验证方法学,很好的验证工具,下面用ModelSim-uvm做一个Hello world. 1.安装modelsim se 10.1a 2.下载uvm_1.1d uvm-1.1d.tar.gz ...
- Debussy与modelsim联仿时 do 文件脚本
quit -sim set PATH1 D:/Program/modelsim/vivado_lib set PATH2 D:/Program/Vivado/Vivado/2014.4/data/ve ...
- 获取DataGridView中的的选中行
1. 获取DataGridView中的的选中行:http://blog.csdn.net/yiqijinbu/article/details/7734593 2.winform datagridvie ...
- Selenium2+python自动化24-js处理富文本(带iframe)
前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,本篇讲解通过js的方法处理富文本上iframe的 ...