關于微信jssdk實現(xiàn)多圖片上傳的一點心得分享
更新時間:2016年12月13日 17:00:00 作者:Louis_李
這篇文章主要介紹了關于微信jssdk實現(xiàn)多圖片上傳的一點心得分享,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
一.首先在common.js里封裝一個函數(shù),在需要調用jsSDK的頁面引用此方法即可實現(xiàn)微信的信息配置
function signatureJSSDK() {
var url = window.location.href.split('#')[0];//后臺需要此頁面的url來生成參數(shù)
$.ajax({
url:IPWeiXinJssdk,//調用后臺接口,用后臺返回的結果來進行微信接口的基礎配置
type:"post",
dataType:"json",
data:{"url":url},
success:function (result) {
if (result) {
//后臺接口調用成功,開始配置微信
wx.config({
debug : false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。
appId : result.appid, // 必填,公眾號的唯一標識
timestamp : result.timestamp, // 必填,生成簽名的時間戳
nonceStr : result.noncestr, // 必填,生成簽名的隨機串
signature : result.signature,// 必填,簽名,見附錄1
jsApiList : [// 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
/*
* 所有要調用的 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ù),如簽名過期導致驗證失敗,具體錯誤信息可以打開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({//調用微信拍照功能
count: 1, // 默認9
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ['camera'], // 可以指定來源是相冊還是相機,默認二者都有
success: function(res) {
localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標簽的src屬性顯示圖片
$(that).find(".ago").attr('src', localIds);//本地預覽,localIds可以當做img標簽的src屬性
wx.uploadImage({//用戶預覽的同時,上傳至微信服務器
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;//將此圖片在微信服務器上的werverID存入數(shù)組
}
});
}
});
});
$("#nextStep").click(function () {//用戶點擊下一步時,調用后臺接口,傳給后臺serverIdsArr,后臺可通過此id從微信服務器下載這些圖片到后臺
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ā)至后臺,后臺從微信服務器下載圖片,然后反饋圖片在我們服務器上的相對路徑
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));//可以在手機上打印此數(shù)組,調試用,看看是否全部上傳成功
});
}
})
以上是我在使用微信jssdk,實現(xiàn)多圖上傳的代碼,因為每個人的需求不盡相同,有的部分代碼被我刪除,希望能幫到大家!如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
將input框中輸入內容顯示在相應的div中【三種方法可選】
本篇文章主要介紹了在input框中輸入內容,會相應的顯示在下面的div中的不同做法:js方法;jQuery方法;AngularJs方法,具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
JavaScript中數(shù)組flat方法的使用與實現(xiàn)方法
在Array的顯示原型下有一個flat方法,可以將多維數(shù)組,降維,傳的參數(shù)是多少就降多少維,下面這篇文章主要給大家介紹了關于JavaScript中數(shù)組flat方法的使用與實現(xiàn)的相關資料,需要的朋友可以參考下2022-08-08
JavaScript封裝Vue-Router實現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實現(xiàn)流程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-09-09
JavaScript html5利用FileReader實現(xiàn)上傳功能
這篇文章主要為大家詳細介紹了JavaScript html5利用FileReader實現(xiàn)上傳功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03
JavaScrip實現(xiàn)圖片壓縮與分辨率等比例縮放
這篇文章主要為大家詳細介紹了如何使用JavaScrip實現(xiàn)圖片壓縮與分辨率等比例縮放,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03

