jsapi 同时上传多张照片

开始用的js闭包,android的可以,ios不好用,目前已经调试好用

function upload_img(){
	var len=$("#imglist .new").length;
		wx.chooseImage({
                    count: 4-len, // 默认9
                    sizeType: [‘original‘, ‘compressed‘],
                    sourceType: [‘album‘],
                    success: function(res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

						var str= new Array();
						str = (localIds+"").split(",");
						var i=0;
                        var upload = function() {

                            wx.uploadImage({
                                localId: str[i],
                                success: function(res) {
									$("#imglist").append("<li class=‘new‘ id=‘img_"+i+"‘ style=‘width:23%; float:left; margin-left:1.6%; position:relative;‘><div id=‘img_ids‘></div><img style=‘height:"+bximg_height+";width:100%;border-radius:5px;‘ src=‘"+str[i]+"‘ onclick=\"javascript:del_img(‘"+i+"‘)\" ><img src=‘__IMG__/wuye/05.png‘ onclick=\"javascript:del_img(‘"+i+"‘)\" width=‘21%;‘ style=‘position:absolute; top:2px; right:2px;‘/></li>");
									$("#img_ids").append("<input type=‘hidden‘ name=‘img_ids[]‘ id=‘img_id"+i+"‘ value=‘"+res.serverId+"‘ />");
									if($("#imglist .new").length >=4){
										$("#add").hide();
									}
                                    i++;
                                    if (i <= str.length) {
                                        upload();
                                    }
                                }
                            });
                        };

                        upload();
                    }
                });
		/*
		wx.chooseImage({
			count: 4-len, // 默认9
			sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
			sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
			success: function (res) {
				var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

				var str= new Array();
				str = (localIds+"").split(",");
				for(var i=0;i<=str.length-1;i++){
					//setTimeout(function (){alert(‘‘))},100);
					wx.uploadImage({
						localId: str[i], // 需要上传的图片的本地ID,由chooseImage接口获得
						isShowProgressTips: 1, // 默认为1,显示进度提示
						success: (function(i,str){
							return function (res) {
								//$("#imglist").append("<img id=‘img_"+i+"‘ src=‘"+str[i]+"‘ onclick=\"javascript:del_img(‘"+i+"‘)\" width=‘100‘ >");
								$("#imglist").append("<li class=‘new‘ id=‘img_"+i+"‘ style=‘width:23%; float:left; margin-left:1.6%; position:relative;‘><div id=‘img_ids‘></div><img style=‘height:"+bximg_height+";width:100%;border-radius:5px;‘ src=‘"+str[i]+"‘ onclick=\"javascript:del_img(‘"+i+"‘)\" ><img src=‘__IMG__/wuye/05.png‘ onclick=\"javascript:del_img(‘"+i+"‘)\" width=‘21%;‘ style=‘position:absolute; top:2px; right:2px;‘/></li>");
								$("#img_ids").append("<input type=‘hidden‘ name=‘img_ids[]‘ id=‘img_id"+i+"‘ value=‘"+res.serverId+"‘ />");
								if($("#imglist .new").length >=4){
									$("#add").hide();
								}
								//var serverId = res.serverId; // 返回图片的服务器端ID
							}
						})(i,str)

					});
				}
			}
		});
		*/
	}

  

时间: 2024-08-26 12:15:25

jsapi 同时上传多张照片的相关文章

微信JS-SDK上传多张照片

通过JS-SDK进行操作的基本步骤包括:引用微信的JS.配置权限验证参数及使用的接口.通过ready及error验证配置及功能接口的使用等.如下以上传图片Demo为例进行说 (1)引入JS及配置调用参数 <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> wx.config({

上传多张照片并实现预览过程

function selectImage(imgFile){ //上传的多张图片 var allFiles = imgFile.files; var imgArr = []; for(var i=0;i<allFiles.length;i++){ var file = allFiles[i]; //添加一层过滤 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; if(!rFilter.te

多张图片上传功能

今天闲着没事,把之前的多张图片上传代码整理了下. 页面主要代码: 1 <div class="upBox upBox2"> 2 <div class="d1"> 3 <a class="redA1 rightA" href="javascript:choosePhotos();" id="continue_add_button" style="display:none

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

图片投票图片上传

图片投票项目,用户自己上传三张照片,程序将上传的三张照片上传到七牛服务器,并将回调的保存在七牛服务器的地址的链接上传到自己的数据库. // 图片上传 $('#upload').click(function(){ var inputSize = $("#photo_value_cont>input").size(); if(inputSize >= 3){ alert("最多上传三张图片!"); return; } var $btn = $('#uploa

Xamarin.Android 压缩图片并上传到WebServices

随着手机的拍照像素越来越高,导致图片赞的容量越来越大,如果上传多张图片不进行压缩.质量处理很容易出现OOM内存泄漏问题. 最近做了一个项目,向webservices上传多张照片,但是项目部署出来就会出现闪退现象,后来经行调试发现图片没有进行压缩,一张图片大小为2M,然而webservices没法接搜多个大图片,所以需要改下配置文件,我这里改为40M. <system.web> <httpRuntime maxRequestLength = "40960" useFul

html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html页面 需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响 addPhoto.html <!--图片缩略图--> <div class="weui-cells weui-

小程序上传图片,排队上传

//没有处理的wxml,但是有效果,可以简单试验一下 <view class='minbox1'> <text class='red wzgs'>*</text> <text class='wzgs'>照片(点击下面方框上传)</text> <text class='mis'>{{z}}/9</text> </view> <view class='left' wx:if="{{pics}}&qu

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

值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回:  res.localIds用于上传图片使用    上传图片:wx.uploadImage. 2.上传图片的时候务必是一张一张的上传的(建议采用递归) 3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传. 案例:深圳艺星“#美力女生#星粉颜值夏令营,2019Yestar艺星整形” Html <div class="photos"> <p>同时选择上传1-9张照片,