1.完整實(shí)現(xiàn)ios和安卓微信環(huán)境選擇微信相冊(cè)圖片并上傳保存在本地
2.注意js版本兼容,使用該版本
在金山等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需求定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),金山網(wǎng)站建設(shè)費(fèi)用合理。
官方解釋 4.前端核心代碼如下: 5.后端核心代碼如下: 效果截圖
3.本實(shí)例流程將先調(diào)用wx.chooseImage接口獲取選擇的圖片localId,返回localId在安卓微信可以作為img標(biāo)簽的src屬性顯示圖片,但在ios下需要再調(diào)用wx.getLocalImgData接口來(lái)顯示圖片,然后要保存圖片需調(diào)用wx.uploadImage接口將圖片上傳至微信.....
.....
.....
.....
wx.config({
// 配置信息, 即使不正確也能使用 wx.ready
debug: false,
appId:"{$signPackage.appId}",
timestamp:"{$signPackage.timestamp}",
nonceStr:"{$signPackage.nonceStr}",
signature:"{$signPackage.signature}",
jsApiList: [
// 所有要調(diào)用的 API 都要加到這個(gè)列表中
'uploadImage',
'chooseImage',
'getLocalImgData',
]
});
var imgContainer = document.getElementsByClassName("upload-box")[0];
$("#uploaderBox").on("click", function(e) {
wx.chooseImage({
count: 9, // 默認(rèn)9
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有
success: function (res) {
var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的src屬性顯示圖片
var i = 0, length = localIds.length;//循環(huán)操作9張圖片
function upload() {
var serverId = '';
wx.uploadImage({
localId: localIds[i], // 需要上傳的圖片的本地ID,由chooseImage接口獲得
isShowProgressTips: 1, // 默認(rèn)為1,顯示進(jìn)度提示
success: function (res) {
serverId = res.serverId; // 返回圖片的服務(wù)器端ID
if(agent_type == 'android')
{
var localData = localIds[i]; // localData是圖片的base64數(shù)據(jù),可以用img標(biāo)簽顯示
//追加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數(shù)據(jù),可以用img標(biāo)簽顯示
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";
}
}
標(biāo)題名稱:使用微信JS-SDK圖像接口上傳圖片簡(jiǎn)單實(shí)例
地址分享:http://weahome.cn/article/pdjpcj.html