這里首先默認(rèn)你已經(jīng)稍微瀏覽過微信的文檔說明，并完成jdk的config流程杏死。
然后直接把照片選擇章姓、上傳的兩個方法放出來：
function photoSelect(str, num){//照片選擇，str為數(shù)據(jù)指向
num = !num? 1:num;//單次選擇數(shù)量识埋，num為空時，單選
wx.chooseImage({
count: num,//當(dāng)num大于9零渐，沒有反應(yīng)窒舟，打開調(diào)試狀態(tài)會有超出上限的報錯
sizeType: ['original', 'compressed'],
success: function (res) {
var localIds = res.localIds;
photoUpload(str, localIds);
}
});
}
function photoUpload(str, localIds){//照片上傳
var localId = localIds.splice(0, 1);
//ios專用
if(localId.indexOf("wxlocalresource") != -1){
localId = localId.replace("wxlocalresource", "wxLocalResource");
}
//當(dāng)不使用定時器的時候，連續(xù)上傳1+照片后诵盼，會莫明其妙滴不再執(zhí)行惠豺，迫不得已掏出定時器這個大殺器~
setTimeout(function(){
wx.uploadImage({//這個玩意一次只能上傳一張圖片
localId: localId.toString(),
isShowProgressTips: 1,
success: function(res){
var serverId = res.serverId;
photoSelectData[str].url(localId,serverId);//這個根據(jù)自己需求添加
//localIds沒有傳完，即回調(diào)函數(shù)繼續(xù)上傳
if(localIds.length >= 1){
photoUpload(str, localIds);
}
},
fail: function(res){
alert('照片上傳失敗风宁，請稍后再試洁墙！');
}
})
},50);
}
功能測試環(huán)境是公眾平臺的測試號。
圖片上傳戒财，當(dāng)不使用定時器的時候热监，連續(xù)上傳1+照片后，會莫明其妙滴不再執(zhí)行饮寞，知道什么情況的孝扛，或者能不使用定時器解決的兄弟情告知我一聲。
圖片上傳中幽崩，截取的localId需要使用toString()轉(zhuǎn)換一下才能正確識別苦始。
功能代碼完成后，我們來看看數(shù)據(jù)的處理慌申，分單選和多選兩種情況陌选，一起放出來(不含樣式，具體使用蹄溉，還得看具體需求)：
//標(biāo)簽
//單張上傳樣例
<a class="photo-select" data-id="firstPhoto">
<img src="" id="firstPhoto"/>
</a>
<a class="photo-select" data-id="secondPhoto">
<img src="" id="secondPhoto"/>
</a>
//多張上傳樣例
<div class="batch-upload">
<div class="batch-title">其他照片</div>
<div class="batch-pic" id="otherPhoto">
</div>
<a class="photo-select" data-id="otherPhoto" data-num="9">批量上傳</a>
</div>
//微信config處理
wx.ready(function(){
$('.photo-select').click(function(){
var $this = $(this);
var str = $this.attr('data-id');
var num = $this.attr('data-num')?$this.attr('data-num'):null;
photoSelect(str, num);
});
});
wx.error(function(){
$('.photo-select').click(function(){
alert('微信權(quán)限獲取失敗咨油，請稍后再試！');
});
});
//數(shù)據(jù)處理集合
//包括serverId的信息保存柒爵，是否有圖片的狀態(tài)判斷臼勉，以及圖片展示
photoSelectData = {
//單張上傳
firstPhoto: {
serverId: '',
state: false,
url: function(data,serverId){
$('#firstPhoto').attr('src',data);
this.state = true;
this.serverId = serverId;
}
},
secondPhoto: {
serverId: '',
state: false,
url: function(data,serverId){
$('#firstPhoto').attr('src',data);
this.state = true;
this.serverId = serverId;
}
},
//批量上傳
otherPhoto: {
serverId: [],
state: false,
url: function(data, serverId){
var html = '<div class="pic">'
+'<i class="pic-close" onclick="photoCancel('+"'otherPhoto'"+',this)"></i>'
+'<img src="'+data+'">'
+'</div>';
$('#otherPhoto').append(html);
this.serverId.push(serverId);
photoSelectData.batchState('otherPhoto');
},
//批量上傳狀態(tài)判斷
batchState: function(str){
if(photoSelectData[str].serverId.length >= 1){
photoSelectData[str].state = true;
}else{
photoSelectData[str].state = false;
}
}
}
}
//多張上傳的單張圖片刪除
function photoCancel(str, obj){
var $obj = $(obj).parent();
var $pic = $('#'+str+' .pic');
var index = $pic.index($obj);
$pic.eq(index).remove();
photoSelectData[str].serverId.splice(index,1);
photoSelectData.batchState(str);
}
