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则不会成功。

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

原文地址:https://www.cnblogs.com/liuqingxia/p/11263410.html

时间: 2024-10-14 06:28:56

js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)的相关文章

小议头像预览裁剪上传的实现

在做头像上传的时候,浏览器默认是无法取得本地图片的,当然 HTML5 是可以的.不过IE6-8怎么破?目前比较通用的方案都是 flash 解决. 说道头像预览和裁剪,我最熟悉的就是 Discuz 的那个了,非常方便好用.不仅可以选择本地图片,还能直接调用摄像头拍摄,当然前提是你必须有个摄像头. 于是我心血来潮的想把他剥离出来给项目用,于是有就了此文..我就不说怎么提取怎么调用,就简单的谈谈他是怎么处理图片好了,反正不是我们想的那样,和我想的出入非常大. 这个插件呢,差不多分为四步处理:1. 前台

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

这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有本地化可以选择中文) 要做什么效果呢, 就是页面上有个<input type="file" />, 用户选择需要上传的图片后, 页面上显示将要上传的图片. 以前呢, 需要Ajax将原图上传到服务器, 得到成功响应后在页面上添加一张图片. 如果用户发现上传错了, 需要把服务器上的

图片选择,预览及上传

记得以前老师教我们写项目,要实现图片上传的功能,我们都是先用一个input选好图片,然后单独做一个提交图片的按钮,点击按钮,使用form表单提交到后台,然后通过 // 获取上传的文件 HttpPostedFileBase file = Request.Files[0]; 这一行来获取上传到后台的文件,然后来验证上传的文件是不是图片,其实在前台,通过设置input属性,就可以限制我们只能选择图片文件了,当然,后台的验证也是不能少的, // 设置accept属性,限制能选择的文件类型为图片 <inp

js实现图片预览以及上传

HTML 代码: <input  type="file" id="fileid" onchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/>  <input  type="hidden" id="hidden_s&quo

图片预览剪裁上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #mask { float: left; w

前台页面 上传预览 调用上传服务

function openBrowse(){ var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; if(ie){ document.getElementById("file").click(); document.getElementById("filename").value=document.getElementById("file"

前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome

在现在的Web开发中不可避免的会做一个图片预览的功能, 比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览, 很明显的在这个过程中两次Web请求,一次发送文件,一次下载文件,到最后这个文件如果在客户端被删除(取消上传,弃用这次的上传), 这整个过程都白费了.我们希望能够在图片上传之前就能进行图片的预览,这样就避免了不必要的网络请求和时间等待. 在IE中有如下方式 var url; var file

利用jquery,html5实现图片预览实时上传

          html代码 <div class="form-group"> <label for="pic" class="col-md-1 control-label">小图:</label> <div class="col-md-4"> <input type="file" class="form-control" nam

JS图片上传预览插件制作(兼容到IE6)

其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会