快捷導(dǎo)航

微信JSSDK多圖片上傳并且解決IOS系統(tǒng)上傳一直加載的問(wèn)題

更新時(shí)間：2016年03月06日 13:58:10 作者：雪雁

這篇文章主要介紹了微信JSSDK多圖片上傳并且解決IOS系統(tǒng)上傳一直加載的問(wèn)題的相關(guān)資料,需要的朋友可以參考下

微信多圖片上傳必須挨個(gè)上傳，也就是不能并行，得串行：

那么我們可以定義一個(gè)如下所示的上傳函數(shù)：

var serverIds = [];

function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader('正在提交數(shù)據(jù)...');
$('form').submit();
}
wx.uploadImage({
localId: localImagesIds[0], // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
success: function (res) {
serverIds.push(res.serverId); // 返回圖片的服務(wù)器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('上傳失敗，請(qǐng)重新上傳！');
}
});
}

上傳函數(shù)定義了，那么當(dāng)點(diǎn)擊圖片框的時(shí)候，需要選擇圖片，定義如下：

//選擇圖片
$('#uploadImages img').on('click', function () {
var $img = $(this);
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success: function (res) {
var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
//$.alert(localIds[0]);
$img.attr('src', localIds[0]).addClass('uploaded');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});

當(dāng)用戶選擇了所有的圖片之后，就需要上傳圖片了。這里就需要用到我們剛才定義的函數(shù)了，具體代碼如下所示：

//提交事件
$('#btnSubmit').on('click', function () {
var $chooseImages = $('#uploadImages img.uploaded');
if ($chooseImages.length === 0) {
$.alert('請(qǐng)上傳照片！');
return;
}
$.showPreloader('正在上傳照片...');
var localImagesIds = [];
$chooseImages.each(function () {
localImagesIds.push($(this).attr('src'));
});
uploadImages(localImagesIds);
});

如上面代碼所示，改處調(diào)用了函數(shù)uploadImages，然后將localImagesIds傳遞過(guò)來(lái)了。在uploadImages函數(shù)中，使用了遞歸，但一張圖片上傳完成后，就會(huì)再次調(diào)用本身，繼續(xù)上傳下一張圖片，請(qǐng)注意以下關(guān)鍵代碼：

wx.uploadImage({
localId: localId, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
success: function (res) {
serverIds.push(res.serverId); // 返回圖片的服務(wù)器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('上傳失敗，請(qǐng)重新上傳！');
}
});

這樣，一切看起來(lái)是OK的，而且Android系統(tǒng)沒(méi)有任何問(wèn)題。但是，IOS卻無(wú)法正常上傳，一直會(huì)顯示加載狀態(tài)。代碼反復(fù)檢查，木有任何問(wèn)題，那么肯定是微信的坑了。。。。

歷經(jīng)九九八十一難，終于找到解決辦法：

var localId = localImagesIds[0];
//解決IOS無(wú)法上傳的坑
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}

uploadImages全部代碼如下所示：

function uploadImages(localImagesIds) {
if (localImagesIds.length === 0) {
$.showPreloader('正在提交數(shù)據(jù)...');
$('form').submit();
}
var localId = localImagesIds[0];
//解決IOS無(wú)法上傳的坑
if (localId.indexOf("wxlocalresource") != -1) {
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
wx.uploadImage({
localId: localId, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
success: function (res) {
serverIds.push(res.serverId); // 返回圖片的服務(wù)器端ID
localImagesIds.shift();
uploadImages(localImagesIds);
},
fail: function (res) {
$.alert('上傳失敗，請(qǐng)重新上傳！');
}
});
}

以上所述是針對(duì)微信JSSDK多圖片上傳并且解決IOS系統(tǒng)上傳一直加載的問(wèn)題的相關(guān)介紹，希望對(duì)大家有所幫助！

您可能感興趣的文章: