微信多图上传解决IOS不兼容问题

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

//初始化配置
wx.config({

debug: false,

appId: '<?php echo $signPackage["appId"];?>',

timestamp: <?php echo $signPackage["timestamp"];?>,

nonceStr: '<?php echo $signPackage["nonceStr"];?>',

signature: '<?php echo $signPackage["signature"];?>',

jsApiList: [

// 所有要调用的 API 都要加到这个列表中
'chooseImage',

'previewImage',

'uploadImage',

'downloadImage'

]

});

//调用接口
var images = {

localId: [],

serverId: []

};


document.querySelector('#chooseImage').onclick = function () {

wx.chooseImage({

success: function (res) {

images.localId = res.localIds;

alert('已选择 ' + res.localIds.length + ' 张图片');

var img_val="";

var localIds = res.localIds;
var i = 0, length = images.localId.length;
function upload(){

wx.uploadImage({

localId: localIds[i].toString(), // 需要上传的图片的本地ID,由chooseImage接口获得

isShowProgressTips: 1, // 默认为1,显示进度提示

success: function (res) {
i++;
var serverId = res.serverId; // 返回图片的服务器端ID

var imgNode ='<div class="pic_close"><img src="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=<?php echo $acc ?>&media_id='+serverId+'" class="upImg"/> <img class="close" src="__STATIC__/close.png" /></div>';

if($('#thumb').val()==''){
document.getElementById("thumb").value="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=<?php echo $acc ?>&media_id="+serverId;
}else{
document.getElementById("thumb").value =document.getElementById("thumb").value + ",http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=<?php echo $acc ?>&media_id="+serverId;
}

imgNode.onclick=function(){
var src=$(this).attr('src');
var arr=$('#thumb').val().split(',');
wx.previewImage({
current: src, // 当前显示图片的http链接
urls:arr // 需要预览的图片http链接列表
});
}


$("#imgdiv").append(imgNode);
if (i < length) {
setTimeout(upload(), 100);
}
},

fail: function(res){

alert("上传失败,msg:"+JSON.stringify(res));

}

});
}
setTimeout(upload(), 100);
}

});

};
</script>

posted @ 2017-04-01 14:12  nodenoob  阅读(1434)  评论(0编辑  收藏  举报