微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信多图片上传必须挨个上传，也就是不能并行，得串行：
那么我们可以定义一个如下所示的上传函数：
varserverIds=[];
functionuploadImages(localImagesIds){
if(localImagesIds.length===0){
$.showPreloader('正在提交数据...');
$('form').submit();
}
wx.uploadImage({
localId:localImagesIds[0],//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
serverIds.push(res.serverId);//返回图片的服务器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail:function(res){
$.alert('上传失败，请重新上传！');
}
});
}
上传函数定义了，那么当点击图片框的时候，需要选择图片，定义如下：
//选择图片
$('#uploadImagesimg').on('click',function(){
var$img=$(this);
wx.chooseImage({
count:1,//默认9
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
success:function(res){
varlocalIds=res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//$.alert(localIds[0]);
$img.attr('src',localIds[0]).addClass('uploaded');
},
fail:function(res){
alert(JSON.stringify(res));
}
});
});
当用户选择了所有的图片之后，就需要上传图片了。这里就需要用到我们刚才定义的函数了，具体代码如下所示：
//提交事件
$('#btnSubmit').on('click',function(){
var$chooseImages=$('#uploadImagesimg.uploaded');
if($chooseImages.length===0){
$.alert('请上传照片！');
return;
}
$.showPreloader('正在上传照片...');
varlocalImagesIds=[];
$chooseImages.each(function(){
localImagesIds.push($(this).attr('src'));
});
uploadImages(localImagesIds);
});
如上面代码所示，改处调用了函数uploadImages，然后将localImagesIds传递过来了。在uploadImages函数中，使用了递归，但一张图片上传完成后，就会再次调用本身，继续上传下一张图片，请注意以下关键代码：
wx.uploadImage({
localId:localId,//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
serverIds.push(res.serverId);//返回图片的服务器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail:function(res){
$.alert('上传失败，请重新上传！');
}
});
这样，一切看起来是OK的，而且Android系统没有任何问题。但是，IOS却无法正常上传，一直会显示加载状态。代码反复检查，木有任何问题，那么肯定是微信的坑了。。。。
历经九九八十一难，终于找到解决办法：
varlocalId=localImagesIds[0];
//解决IOS无法上传的坑
if(localId.indexOf("wxlocalresource")!=-1){
localId=localId.replace("wxlocalresource","wxLocalResource");
}
uploadImages全部代码如下所示：
functionuploadImages(localImagesIds){
if(localImagesIds.length===0){
$.showPreloader('正在提交数据...');
$('form').submit();
}
varlocalId=localImagesIds[0];
//解决IOS无法上传的坑
if(localId.indexOf("wxlocalresource")!=-1){
localId=localId.replace("wxlocalresource","wxLocalResource");
}
wx.uploadImage({
localId:localId,//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
serverIds.push(res.serverId);//返回图片的服务器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail:function(res){
$.alert('上传失败，请重新上传！');
}
});
}
以上所述是针对微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题的相关介绍，希望对大家有所帮助！