關(guān)于微信jssdk實現(xiàn)多圖片上傳的一點心得分享
更新時間:2016年12月13日 17:00:00 作者:Louis_李
這篇文章主要介紹了關(guān)于微信jssdk實現(xiàn)多圖片上傳的一點心得分享,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
一.首先在common.js里封裝一個函數(shù),在需要調(diào)用jsSDK的頁面引用此方法即可實現(xiàn)微信的信息配置
function signatureJSSDK() { var url = window.location.href.split('#')[0];//后臺需要此頁面的url來生成參數(shù) $.ajax({ url:IPWeiXinJssdk,//調(diào)用后臺接口,用后臺返回的結(jié)果來進(jìn)行微信接口的基礎(chǔ)配置 type:"post", dataType:"json", data:{"url":url}, success:function (result) { if (result) { //后臺接口調(diào)用成功,開始配置微信 wx.config({ debug : false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 appId : result.appid, // 必填,公眾號的唯一標(biāo)識 timestamp : result.timestamp, // 必填,生成簽名的時間戳 nonceStr : result.noncestr, // 必填,生成簽名的隨機(jī)串 signature : result.signature,// 必填,簽名,見附錄1 jsApiList : [// 必填,需要使用的JS接口列表,所有JS接口列表見附錄2 /* * 所有要調(diào)用的 API 都要加到這個列表中 * 這里以圖像接口為例 */ "chooseImage", "previewImage", "uploadImage", "downloadImage" ] }); } } }) } //微信配置失敗會執(zhí)行wx.error函數(shù) wx.error(function(res) { confirmBox2("wx.config.error"); console.log(res); });
二.在需要使用微信多圖上傳的頁面編寫如下代碼
$(function () { signatureJSSDK();//微信jssdk配置 // config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗證失敗,具體錯誤信息可以打開config的debug模式查看, // 也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名。 wx.ready(function() {//微信配置成功執(zhí)行此函數(shù) //localIdsArr 用來存放localIds,serverIdsArr用來存放serverIds var localIdsArr = [];var serverIdsArr = []; $(".BImgContent").click(function () {//點擊事件觸發(fā)微信拍照 var that = $(this); wx.chooseImage({//調(diào)用微信拍照功能 count: 1, // 默認(rèn)9 sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['camera'], // 可以指定來源是相冊還是相機(jī),默認(rèn)二者都有 success: function(res) { localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的src屬性顯示圖片 $(that).find(".ago").attr('src', localIds);//本地預(yù)覽,localIds可以當(dāng)做img標(biāo)簽的src屬性 wx.uploadImage({//用戶預(yù)覽的同時,上傳至微信服務(wù)器 localId:""+localIds, success: function(res) { var i =0; if($(that).hasClass("img1")){ i = 1; }else if($(that).hasClass("img2")){ i = 2; }else if($(that).hasClass("img3")){ i = 3; } localIdsArr[i] = localIds;//將此圖片的localIds存入數(shù)組 serverIdsArr[i] = res.serverId;//將此圖片在微信服務(wù)器上的werverID存入數(shù)組 } }); } }); }); $("#nextStep").click(function () {//用戶點擊下一步時,調(diào)用后臺接口,傳給后臺serverIdsArr,后臺可通過此id從微信服務(wù)器下載這些圖片到后臺 var flag = 0; $(".ago").each(function (index,val) { //判斷前臺頁面需要上傳的部分是否都上傳完 var localIds = $(val).attr("src"); if(localIds === "./img/photoAddContent1.png"){ flag = 1; return false; } }); if(flag === 0){//驗證通過,傳送serverID至后臺 // alert("開始發(fā)送serverID至后臺"); $(this).unbind("click"); for(var i=0;i<serverIdsArr.length;i++){ pushSeverId(serverIdsArr[i]); } }else{ confirmBox2("請完善以上資料"); } }); }); //將serverId發(fā)至后臺,后臺從微信服務(wù)器下載圖片,然后反饋圖片在我們服務(wù)器上的相對路徑 var urlList = []; function pushSeverId(serverId) { $.post('http://XXX.XXX', { serverId: serverId },function (text, status) { var obj = {"imgStr":"","imgType":""}; obj.imgStr = text;//text為后臺返回的圖片url urlList.push(obj); // alert(JSON.stringify(urlList));//可以在手機(jī)上打印此數(shù)組,調(diào)試用,看看是否全部上傳成功 }); } })
以上是我在使用微信jssdk,實現(xiàn)多圖上傳的代碼,因為每個人的需求不盡相同,有的部分代碼被我刪除,希望能幫到大家!如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
相關(guān)文章
JavaScript實現(xiàn)的圓形浮動標(biāo)簽云效果實例
這篇文章主要介紹了JavaScript實現(xiàn)的圓形浮動標(biāo)簽云效果,涉及javascript字符串與數(shù)組的遍歷、排序操作以及元素樣式動態(tài)操作與數(shù)學(xué)運算等相關(guān)技巧,是非常實用的一段代碼,需要的朋友可以參考下2015-08-08通過js腳本復(fù)制網(wǎng)頁上的一個表格的不錯實現(xiàn)方法
通過js腳本復(fù)制網(wǎng)頁上的一個表格的不錯實現(xiàn)方法...2006-12-12