js-jssdk微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）

╰+攻爆jí腚メ 2024-04-20 11:09 17阅读 0赞

**值得注意的是：**

**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 οnclick="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则不会成功。

我们的解决办法也是需要延迟几百毫秒才能正常成功的接收到苹果的分享反馈

转载于:https://www.cnblogs.com/liuqingxia/p/11263410.html

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 js-jssdk微信H5选择多张图片预览并上传（兼容ios，安卓，已测试）

*值得注意的是：** **1.在微信H5中选择图片运用：wx.chooseImage，成功后返回： res.localIds用于上传图片使用** ** 上传图片...

╰+攻爆jí腚メ/ 2024年04月20日 11:09/ 0 赞/ 18 阅读

相关 php多张图片切换效果,ThinkPHP实现选择多张图片并可预览

码农公社 210.net.cn 210是何含义？10月24日是程序员节，1024 =210、210既 210 之意。 ThinkPHP实现选择多张图片并可预览点击

我就是我/ 2022年11月12日 09:48/ 0 赞/ 186 阅读

相关微信图片预览

微信公众号开发中，点击查看大图，其实不需要再写js效果直接调用微信app的预览功能即可用例： <script> //图片列表

男娘i/ 2022年08月04日 13:47/ 0 赞/ 481 阅读

相关 IE8 上传图片预览（兼容）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

Love The Way You Lie/ 2022年05月29日 12:22/ 0 赞/ 282 阅读

相关 H5调用微信图片显示预览

// 首选你要开心的引入下js <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></sc

深藏阁楼爱情的钟/ 2022年05月11日 06:18/ 0 赞/ 567 阅读

相关微信小程序之图片选择/上传/预览/删除

微信小程序选择图片、预览图片、长按删除图片以及上传图片。 wxml部分： <view class='imgs'> <block wx:for="{

悠悠/ 2022年05月04日 01:58/ 0 赞/ 1023 阅读

相关原生js多图片上传并预览

因为原生JS比较通用，不管你前端用的什么框架，基本可以使用这套写法，也是参考网上的，自己写的不完善，基本提供一个思路，勿喷！！ html 代码，input标签里面一定要有m

悠悠/ 2022年01月31日 13:39/ 0 赞/ 521 阅读

相关微信小程序实现上传图片并可以预览图片

我的qq 2038373094 我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会做过律师在线咨

刺骨的言语ヽ痛彻心扉/ 2022年01月28日 10:05/ 0 赞/ 518 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 805 阅读

相关 js实现图片上传时本地预览（支持同时上传多张图片）

最近学前端的时候，有个搭建网站的学习任务。其中就有一个功能要实现：可以从本地上传图片到网页，并在本地实现预览。查了很多资料，最后终于找到一种比较简单的实现方法。

妖狐艹你老母/ 2021年09月16日 15:50/ 0 赞/ 817 阅读