在实现微信多图片上传的时候,我们总会遇到异步请求的问题,由于我们往往不可能在chooseImage的时候就开始上传图片,所以我们需要把localIds和serverId保存下来,但是在wx.chooseImage和uploadImage两个方法中都是异步请求的,我们在success的function中存储数据,然后在ajax外立即又调用了这个数据,则该数据是没有值或为默认值的,因为请求已经提交,不等服务器返回结果就立马往下执行,所以此时的保存的数据肯定不存在
##选择图片
wx.chooseImage({
sizeType: ['original'@H_301_4@,'compressed'@H_301_4@],// 可以指定是原图还是压缩图,默认二者都有@H_301_4@
sourceType: ['album'@H_301_4@,'camera'@H_301_4@],// 可以指定来源是相册还是相机,默认二者都有@H_301_4@
success: function@H_301_4@ (res)@H_301_4@ {@H_301_4@
var@H_301_4@ localIds_arr = res.localIds; //如果此处用全局变量存储,然后在这个chooseImage结束以后立马调用这个全局变量,就会发现里面是没有值或者是你自己初始化的一个值。因为ajax的请求是异步的,在提交请求成功后还未返回结果就已经开始往下执行,也就意味着,在此处的function中res参数还没有返回值的时候,已经开始往下执行了,而success则做了处理,有值得时候会执行里面的代码,当然我们可以写一个检测函数,检测你定义的全局变量是否有变化,如果有再执行相应代码,但这并不是特别理想的做法。为此我直接在success里面做处理,等有了返回值的时候,将这些内容展示出来(显示图片),如下@H_301_4@
// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片@H_301_4@
$.each(localIds_arr,function@H_301_4@(i)@H_301_4@ {@H_301_4@
$('#picture_show'@H_301_4@).append("<div class='div_pic' style='display:inline-block;position: relative;' ><img class='delete_picture' src='barcodegen/html/delete.png' style='position: absolute;right: 0;'/><img class='sigle_picture sigle_picture_small' src='"@H_301_4@+ localIds_arr[i]+"'/></div>"@H_301_4@);
//等我需要上传图片的时候,我再通过获取这些图片的SRC属性来上传@H_301_4@
});
}
});
##上传图片
//上传图片也是如此,我们获取的serverid到底该如何存储并传给后台?如果直接用一个全局变量数组来存储,必然导致该数组第一次传进后台为你定义的初始值,第二次上传(重复上传),才会把第一次请求的值传给后台,这个结果是可以预见的,如果没有每次上传完都把内容清理的话@H_301_4@
//我的做法是串行上传,下载@H_301_4@
var@H_301_4@ current_pic;
mui('body'@H_301_4@).on('tap'@H_301_4@,'#commit_check'@H_301_4@,function@H_301_4@()@H_301_4@{@H_301_4@//当点击上传按钮@H_301_4@
var@H_301_4@ localIds=$('#picture_show .sigle_picture'@H_301_4@);//获取之前添加的img标签@H_301_4@
var@H_301_4@ localIds_arr=new@H_301_4@ Array@H_301_4@();
$.each(localIds,function@H_301_4@(i)@H_301_4@{@H_301_4@
var@H_301_4@ cur_src=$(this@H_301_4@).attr('src'@H_301_4@);
localIds_arr.push(cur_src);
})
if@H_301_4@(localIds_arr.length>0@H_301_4@)//如果有选择照片,则允许上传@H_301_4@
{
uploadToWeixin(localIds_arr);
}
function@H_301_4@ uploadToWeixin@H_301_4@(arr)@H_301_4@ {@H_301_4@
current_pic=arr.pop();//删除并返回数组最后一个元素@H_301_4@
wx.uploadImage({
localId: current_pic,// 需要上传的图片的本地ID,由chooseImage接口获得@H_301_4@
isShowProgressTips: 1@H_301_4@,// 默认为1,显示进度提示@H_301_4@
success: function@H_301_4@ (res)@H_301_4@ {@H_301_4@
serverId = res.serverId; // 返回图片的服务器端ID,保存下来@H_301_4@
download_pic(serverId);//直接在此处执行下载,把图片从微信服务器上下载下来,每上传一张图片,就下载一张图片,具体下载代码这里就不贴出来了@H_301_4@
}
});
if@H_301_4@(arr.length>0@H_301_4@)//如果还有照片则继续上传@H_301_4@
{
uploadToWeixin(arr);//串行上传照片@H_301_4@
}
}