zoukankan      html  css  js  c++  java
  • 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则不会成功。

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

  • 相关阅读:
    Maven打jar包(有依赖)
    java使用ffmpeg进行多个视频合并
    ffmpeg视频精准剪切
    windows下java调用海康sdk,Unable to load library 'HCNetSDK'
    java使用JNA框架调用dll动态库
    排序和反转
    118. 杨辉三角
    1394. 找出数组中的幸运数
    1491. 去掉最低工资和最高工资后的工资平均值
    1332. 删除回文子序列
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/11263410.html
Copyright © 2011-2022 走看看