js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)
值得注意的是:
1.在微信H5中选择图片运用:wx.chooseImage,成功后返回: res.localIds用于上传图片使用
上传图片:wx.uploadImage。
2.上传图片的时候务必是一张一张的上传的(建议采用递归)
3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传。
案例:深圳艺星“#美力女生#星粉颜值夏令营,2019Yestar艺星整形”
Html
<div class="photos">
<p>同时选择上传1-9张照片,第一张为封面图</p>
<div class="photosInput">
<div id="dd"></div> //这里面是存储放置上传的图片的
<div onclick="ChoosePhoto()" id="chooseimgDiv" >选择图片</div>
</div>
</div>
js:
var imgA=new Array();
var imgserverId; //存储的图片拼接字符;
function ChoosePhoto(){
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
document.getElementById("dd").innerHTML="";
imgA=[];
imgserverId="";
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
var htmlPhoto="";
for(var i=0;i<localIds.length;i++){
htmlPhoto +='<div class="imgdiv"><img src='+ localIds[i]+' /></div>';
}
syncUpload(localIds)
document.getElementById("dd").innerHTML+=htmlPhoto;
}
});
};
var syncUpload = function(localIds){
var localId = localIds.pop();
wx.uploadImage({
localId: localId.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
//res.serverId 返回图片的服务器端ID
var serverId = res.serverId; // 返回图片的服务器端ID
imgA.push(serverId)
imgserverId=imgA;
if(localIds.length > 0){
window.setTimeout(function(){
syncUpload(localIds);
},100);
}else{
window.setTimeout(function(){
downloadImage(0);
},100);
}
}
})
}
题外话:
在ios中之前做项目时也有遇到一个需求是“分享朋友圈后抽奖次数+1”。的情况。
安卓能够好好的判断接收到用户分享成功。但是ios则不会成功。
我们的解决办法也是需要延迟几百毫秒才能正常成功的接收到苹果的分享反馈
js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)的更多相关文章
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- 用js实现预览待上传的本地图片
js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- html5 选择多张图片在页面内预览并上传到后台
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张) ...
- js多图预览及上传功能
<%-- Created by IntelliJ IDEA. User: Old Zhang Date: 2018/12/27 Time: 11:17 To change this templa ...
- 如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery+html5+canvas实现图片 预览 压缩 上传
javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...
- 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)
文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...
随机推荐
- 从头到尾说一次 Java 垃圾回收,写得非常好!
Java技术栈 www.javastack.cn 优秀的Java技术公众号 作者:聂晓龙(花名:率鸽),阿里巴巴高级开发工程 ⬆️ 图片来源于网络 之前上学的时候有这个一个梗,说在食堂里吃饭,吃完把餐 ...
- [BZOJ1492] [NOI2007] 货币兑换Cash(cdq分治+斜率优化)
[BZOJ1492] [NOI2007] 货币兑换Cash(cdq分治+斜率优化) 题面 分析 dp方程推导 显然,必然存在一种最优的买卖方案满足:每次买进操作使用完所有的人民币:每次卖出操作卖出所有 ...
- 【接口工具】mac环境下使用Charles抓包Https请求
Charles支持针对Https包解析.具体安装导航请参考“[接口工具]接口抓包工具之Charles” 操作流程 电脑安装证书: Help-SSL Proxying-Install Charles R ...
- 错误提示控件errorProvider
http://www.cnblogs.com/suguoqiang/archive/2012/07/17/2596564.html 错误提示控件errorProvider VS显示: 核心代码: th ...
- SQL server 关于 GROUP BY 详细讲解和用法
1. Group By 语句简介: Group By语句从英文的字面意义上理解就是“根据(by)一定的规则进行分组(Group)”.它的作用是通过一定的规则将一个数据集划分成若干个小的区域,然后针对若 ...
- Math对象(min()-max()-ceil()-floor()-round()和abs())
1.Math.min() 功能:求一组数的最小值,返回值:Number 如果里面有非数字则返回NaN 2.Math.max() 功能:求一组数的最大值,返回值:Number 3.Math.ceil() ...
- 对于call,apply,bind 的理解
JavaScript 中 call().apply().bind() 的用法 之前对与JavaScript中的call,apply,bind这几个方法一直理解的很模糊,今天总结一下. 例1 var n ...
- Git 安装使用及基础命令
Git终端软件安装 1.下载windows上git终端,类似shell工具,下载地址:http://msysgit.github.io/ 2. 安装方法,打开文件,一路点击Next即可 3.安装完成, ...
- ASE Backend Alpha Sprint Review
[Backend] Alpha Review展示博客 团队成员介绍:仅限于Alpha阶段有贡献的成员. 典型场景描述:描述并说明你们认为的产品面向的典型场景. 团队管理与协作:包括但不限于团队内部如何 ...
- Jenkins配置git/github 插件的ssh key
参考来源:http://jingyan.baidu.com/article/a65957f4f0acc624e67f9bc1.html 方式一:本地需要生成公私钥文件,git/github中新建ssh ...