值得注意的是:

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,安卓,已测试)的更多相关文章

  1. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  2. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  3. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  4. html5 选择多张图片在页面内预览并上传到后台

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张) ...

  5. js多图预览及上传功能

    <%-- Created by IntelliJ IDEA. User: Old Zhang Date: 2018/12/27 Time: 11:17 To change this templa ...

  6. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

  7. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. jquery+html5+canvas实现图片 预览 压缩 上传

    javascirpt (function($){ $.fn.extend({ aiiUpload:function(obj) { if(typeof obj !="object") ...

  9. 前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome(学习到的知识)

    文章地址:http://www.cnblogs.com/rubylouvre/p/4597344.html 一.window.URL 在Chrome中,window.URL和window.webkit ...

随机推荐

  1. Log4j指定输出日志的文件

    在Log4j的配置文件中,有一个log4j.rootLogger用于指定将何种等级的信息输出到哪些文件中, 这一项的配置情况如下: log4j.rootLogger=日志等级,输出目的地1,输出目的地 ...

  2. vue+element Form键盘回车事件页面刷新解决

    问题描述:如下代码所示,使用element-ui 中的el-form组件对table进行条件查询,当查询条件仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览 ...

  3. poj_1995 Raising Modulo Numbers (快速幂)

    [题目链接] http://poj.org/problem?id=1995 [算法] 基本快速幂(二进制思想) 注意两个int相乘可能溢出,加(long long)但是相乘不要加括号,不然会先溢出在类 ...

  4. Asp.Net MVC 5使用Identity之简单的注册和登陆

    由于.Net MVC 5登陆和注册方式有很多种,但是Identity方式去实现或许会更简单更容易理解 首先新建一个项目 其次如下选择Empty和MVC的选项 然后打开NuGet包管理器分别安装几个包 ...

  5. slot-scope 插槽 的使用 ——'<template slot-scope="page">'

    slot-scope="page"slot-scope 是一个插槽,拿外面的数据,可以获取当前一行的数据page.row.pageId 拿到当前行数据的pageId注意:slot- ...

  6. Robot Framework 源码阅读 day1 run.py

    robot里面run起来的接口主要有两类 run_cli def run_cli(arguments): """Command line execution entry ...

  7. CA认证机制的简明解释

    公钥机制面临的问题: 假冒身份发布公钥! 可以用CA来认证公钥的身份.CA有点像公安局,公钥就像身份证.公安局可以向任何合法用户颁发身份证以证明其合法身份.第三方只要识别身份证的真伪就能判断身份证持有 ...

  8. 第一次写的MySQLHelper

    一. 第一次写MysqlHelper,用来管理城市的数据库 二.MySQLHelper源代码 using MySql.Data.MySqlClient; using System; using Sys ...

  9. sed \s

    export m1=`free|cut -d ":" -f2|sed -e "s/^\s\s*//g"|head -2|tail -1|cut -d ' ' - ...

  10. CF671D Roads in Yusland

    一道很玄妙的题= = 我们考虑先考虑DP 那么有$f[x]=min(c+\sum f[y])$ $f[x]$表示覆盖x的子树和x->fa[x]的所有边最小代价 我们枚举一条边c覆盖的x-> ...