1.完整實作ios和安卓微信環境選擇微信相冊圖檔并上傳儲存在本地
2.注意js版本相容,使用該版本
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
官方解釋
3.本執行個體流程将先調用wx.chooseImage接口擷取選擇的圖檔localId,傳回localId在安卓微信可以作為img标簽的src屬性顯示圖檔,但在ios下需要再調用wx.getLocalImgData接口來顯示圖檔,然後要儲存圖檔需調用wx.uploadImage接口将圖檔上傳至微信伺服器傳回serverId,将serverId放至隐藏域送出後端,由後端調用微信多媒體接口下載下傳儲存到自己伺服器,多媒體擷取接口為:
http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="token()"&media_id="serverId"
.....
.....
<div class="upload-box">
<div class="z_file">
<div id="uploaderBox"></div>
</div>
{volist name='question.reply_img' id='item'}
{if condition="$item"}
<div class="z_addImg">
<a rel="nofollow" class="shc-btn shc-btn-id" href="javascript:;"></a>
<img src="{$item|default=""}">
<input name="edit_img_key[]" value="{$item}"></input>
</div>
{/if}
{/volist}
</div>
.....
.....
wx.config({
// 配置資訊, 即使不正确也能使用 wx.ready
debug: false,
appId:"{$signPackage.appId}",
timestamp:"{$signPackage.timestamp}",
nonceStr:"{$signPackage.nonceStr}",
signature:"{$signPackage.signature}",
jsApiList: [
// 所有要調用的 API 都要加到這個清單中
'uploadImage',
'chooseImage',
'getLocalImgData',
]
});
var imgContainer = document.getElementsByClassName("upload-box")[0];
$("#uploaderBox").on("click", function(e) {
wx.chooseImage({
count: 9, // 預設9
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,預設二者都有
success: function (res) {
var localIds = res.localIds; // 傳回標明照片的本地ID清單,localId可以作為img标簽的src屬性顯示圖檔
var i = 0, length = localIds.length;//循環操作9張圖檔
function upload() {
var serverId = '';
wx.uploadImage({
localId: localIds[i], // 需要上傳的圖檔的本地ID,由chooseImage接口獲得
isShowProgressTips: 1, // 預設為1,顯示進度提示
success: function (res) {
serverId = res.serverId; // 傳回圖檔的伺服器端ID
if(agent_type == 'android')
{
var localData = localIds[i]; // localData是圖檔的base64資料,可以用img标簽顯示
//追加html
var img = document.createElement("img");
var input = document.createElement("input");
var ass = document.createElement("a");
img.setAttribute("src", localData);
input.setAttribute("name", "serverId[]");
input.setAttribute("value", serverId);
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
ass.setAttribute("class", "shc-btn");
ass.setAttribute("id", "shc-btn"+id);
ass.setAttribute("href", "javascript:;");
imgAdd.appendChild(ass);
imgAdd.appendChild(img);
imgAdd.appendChild(input);
imgContainer.appendChild(imgAdd);
imgRemove(id);//删除按鈕
id++;
}
else
{
wx.getLocalImgData({
localId: localIds[i], // 圖檔的localID
success: function (res) {
var localData = res.localData; // localData是圖檔的base64資料,可以用img标簽顯示
var img = document.createElement("img");
var input = document.createElement("input");
var ass = document.createElement("a");
img.setAttribute("src", localData);
input.setAttribute("name", "serverId[]");
input.setAttribute("value", serverId);
var imgAdd = document.createElement("div");
imgAdd.setAttribute("class", "z_addImg");
ass.setAttribute("class", "shc-btn");
ass.setAttribute("id", "shc-btn"+id);
ass.setAttribute("href", "javascript:;");
imgAdd.appendChild(ass);
imgAdd.appendChild(img);
imgAdd.appendChild(input);
imgContainer.appendChild(imgAdd);
imgRemove(id);
id++;
}
});
}
i++;
if (i < length) {
upload();
}
}
});
}
upload();
}
});
});
foreach ($data['serverId'] as $key => $value)
{
$str = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".擷取token."&media_id=".$value;
$a = file_get_contents($str);
if($a)
{
$resource = fopen(ROOT_PATH."/uploads/".$value.".jpg" , 'w+');
fwrite($resource, $a);
fclose($resource);
$imgs[] = "/uploads/".$value.".jpg";
}
}