微信开发 异步批量上传下载图片

前端之家收集整理的这篇文章主要介绍了微信开发 异步批量上传下载图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在实现微信多图片上传的时候,我们总会遇到异步请求的问题,由于我们往往不可能在chooseImage的时候就开始上传图片,所以我们需要把localIds和serverId保存下来,但是在wx.chooseImage和uploadImage两个方法中都是异步请求的,我们在success的function中存储数据,然后在ajax外立即又调用了这个数据,则该数据是没有值或为默认值的,因为请求已经提交,不等服务器返回结果就立马往下执行,所以此时的保存的数据肯定不存在

##选择图片
    wx.chooseImage({
 sizeType: ['original','compressed'],// 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album','camera'],// 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
     var localIds_arr = res.localIds; //如果此处用全局变量存储,然后在这个chooseImage结束以后立马调用这个全局变量,就会发现里面是没有值或者是你自己初始化的一个值。因为ajax的请求是异步的,在提交请求成功后还未返回结果就已经开始往下执行,也就意味着,在此处的function中res参数还没有返回值的时候,已经开始往下执行了,而success则做了处理,有值得时候会执行里面的代码,当然我们可以写一个检测函数,检测你定义的全局变量是否有变化,如果有再执行相应代码,但这并不是特别理想的做法。为此我直接在success里面做处理,等有了返回值的时候,将这些内容展示出来(显示图片),如下
     // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

   $.each(localIds_arr,function(i) {      
    $('#picture_show').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='"+ localIds_arr[i]+"'/></div>");
//等我需要上传图片的时候,我再通过获取这些图片的SRC属性上传
   });

  }
});
##上传图片
//上传图片也是如此,我们获取的serverid到底该如何存储并传给后台?如果直接用一个全局变量数组来存储,必然导致该数组第一次传进后台为你定义的初始值,第二次上传(重复上传),才会把第一次请求的值传给后台,这个结果是可以预见的,如果没有每次上传完都把内容清理的话

//我的做法是串行上传,下载

 var current_pic;

mui('body').on('tap','#commit_check',function(){//当点击上传按钮
        var localIds=$('#picture_show .sigle_picture');//获取之前添加img标签
        var localIds_arr=new Array();
        $.each(localIds,function(i){
            var cur_src=$(this).attr('src');
            localIds_arr.push(cur_src);

        })
if(localIds_arr.length>0)//如果有选择照片,则允许上传
{

uploadToWeixin(localIds_arr);

}

    function uploadToWeixin(arr) {

current_pic=arr.pop();//删除并返回数组最后一个元素
wx.uploadImage({
    localId: current_pic,// 需要上传图片的本地ID,由chooseImage接口获得
    isShowProgressTips: 1,// 默认为1,显示进度提示
    success: function (res) {

      serverId = res.serverId; // 返回图片的服务器端ID,保存下来

      download_pic(serverId);//直接在此处执行下载,把图片从微信服务器上下载下来,每上传一张图片,就下载一张图片,具体下载代码这里就不贴出来了


    }
});

       if(arr.length>0)//如果还有照片则继续上传
{

 uploadToWeixin(arr);//串行上传照片

}

    }
原文链接:https://www.f2er.com/ajax/161185.html

猜你在找的Ajax相关文章