微信JSSDK多圖片上傳并且解決IOS系統(tǒng)上傳一直加載的問題
微信多圖片上傳必須挨個上傳,也就是不能并行,得串行:
那么我們可以定義一個如下所示的上傳函數(shù):
var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交數(shù)據(jù)...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上傳的圖片的本地ID,由chooseImage接口獲得 isShowProgressTips: 1, // 默認為1,顯示進度提示 success: function (res) { serverIds.push(res.serverId); // 返回圖片的服務(wù)器端ID localImagesIds.shift(); uploadImages(localImagesIds); }, fail: function (res) { $.alert('上傳失敗,請重新上傳!'); } }); }
上傳函數(shù)定義了,那么當(dāng)點擊圖片框的時候,需要選擇圖片,定義如下:
//選擇圖片 $('#uploadImages img').on('click', function () { var $img = $(this); wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標簽的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('請上傳照片!'); return; } $.showPreloader('正在上傳照片...'); var localImagesIds = []; $chooseImages.each(function () { localImagesIds.push($(this).attr('src')); }); uploadImages(localImagesIds); });
如上面代碼所示,改處調(diào)用了函數(shù)uploadImages,然后將localImagesIds傳遞過來了。在uploadImages函數(shù)中,使用了遞歸,但一張圖片上傳完成后,就會再次調(diào)用本身,繼續(xù)上傳下一張圖片,請注意以下關(guān)鍵代碼:
wx.uploadImage({ localId: localId, // 需要上傳的圖片的本地ID,由chooseImage接口獲得 isShowProgressTips: 1, // 默認為1,顯示進度提示 success: function (res) { serverIds.push(res.serverId); // 返回圖片的服務(wù)器端ID localImagesIds.shift(); uploadImages(localImagesIds); }, fail: function (res) { $.alert('上傳失敗,請重新上傳!'); } });
這樣,一切看起來是OK的,而且Android系統(tǒng)沒有任何問題。但是,IOS卻無法正常上傳,一直會顯示加載狀態(tài)。代碼反復(fù)檢查,木有任何問題,那么肯定是微信的坑了。。。。
歷經(jīng)九九八十一難,終于找到解決辦法:
var localId = localImagesIds[0]; //解決IOS無法上傳的坑 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無法上傳的坑 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); // 返回圖片的服務(wù)器端ID localImagesIds.shift(); uploadImages(localImagesIds); }, fail: function (res) { $.alert('上傳失敗,請重新上傳!'); } }); }
以上所述是針對微信JSSDK多圖片上傳并且解決IOS系統(tǒng)上傳一直加載的問題的相關(guān)介紹,希望對大家有所幫助!
相關(guān)文章
iOS應(yīng)用中UISearchDisplayController搜索效果的用法
這篇文章主要介紹了iOS應(yīng)用中UISearchDisplayController搜索效果的用法,包括點擊搜索出現(xiàn)黑條問題的解決方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-02-02iOS實現(xiàn)scrollview上拉顯示Navbar下拉隱藏功能詳解
這篇文章主要給大家介紹了利用iOS實現(xiàn)scrollview上拉顯示Navbar下拉隱藏功能的相關(guān)資料,文中介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05IOS TextFiled與TextView 鍵盤的收起以及處理鍵盤遮擋
這篇文章主要介紹了IOS TextFiled與TextView 鍵盤的收起以及處理鍵盤遮擋的相關(guān)資料,需要的朋友可以參考下2016-12-12iOS實時監(jiān)控網(wǎng)絡(luò)狀態(tài)的改變
這篇文章主要為大家詳細介紹了iOS實時監(jiān)控網(wǎng)絡(luò)狀態(tài)的改變的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-08-08IOS Swift 開發(fā)QRCore(二維碼)實例詳解
這篇文章主要介紹了IOS Swift 開發(fā)QRCore(二維碼)實例詳解的相關(guān)資料,這里對開發(fā)二維碼進行了詳細介紹,需要的朋友可以參考下2016-12-12