js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)
值得注意的是:
1.在微信H5中选择图片运用:wx.chooseImage,成功后返回: res.localIds用于上传图片使用
上传图片:wx.uploadImage。
2.上传图片的时候务必是一张一张的上传的(建议采用递归)
3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传。
案例:深圳艺星“#美力女生#星粉颜值夏令营,2019Yestar艺星整形”
Html
1 2 3 4 5 6 7 | < div class="photos"> < p >同时选择上传1-9张照片,第一张为封面图</ p > < div class="photosInput"> < div id="dd"></ div > //这里面是存储放置上传的图片的 < div onclick="ChoosePhoto()" id="chooseimgDiv" >选择图片</ div > </ div > </ div > |
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | var imgA= new Array(); var imgserverId; //存储的图片拼接字符;<br>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; } }); };<br><br> 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则不会成功。
我们的解决办法也是需要延迟几百毫秒才能正常成功的接收到苹果的分享反馈
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期