1. Fully implement ios and Android wechat environment, select wechat album pictures, upload and save them locally
2. Note that js version is compatible, use this version
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
Official explanation
3. This example process will call the wx.chooseImage interface to get the local ID of the selected image, and return the local ID. in Android wechat, the image can be displayed as the src attribute of the img tag, but in ios, it is necessary to call the wx.getLocalImgData interface to display the image, and then to save the image, it is necessary to call the wx.uploadImage interface to upload the image to the wechat server, return the serverId, and put the serverId to hide The domain submits to the backend, and the backend calls the wechat multimedia interface to download and save to its own server. The multimedia acquisition interface is:
http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="token()"&media_id="serverId"
4. The front-end core code is as follows:
.....
.....
<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 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({
// Configuration information, even if not correct, can use wx.ready
debug: false,
appId:"{$signPackage.appId}",
timestamp:"{$signPackage.timestamp}",
nonceStr:"{$signPackage.nonceStr}",
signature:"{$signPackage.signature}",
jsApiList: [
// All API s to be called are added to this list
'uploadImage',
'chooseImage',
'getLocalImgData',
]
});
var imgContainer = document.getElementsByClassName("upload-box")[0];
$("#uploaderBox").on("click", function(e) {
wx.chooseImage({
count: 9, // Default 9
sizeType: ['compressed'], // You can specify whether it is original or compressed, both of which are available by default
sourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera, both of which are available by default
success: function (res) {
var localIds = res.localIds; // Returns the local ID list of the selected photo. The local ID can be used as the src attribute of the img tag to display the picture
var i = 0, length = localIds.length;//Loop operation 9 pictures
function upload() {
var serverId = '';
wx.uploadImage({
localId: localIds[i], // The local ID of the image to be uploaded is obtained by the chooseImage interface
isShowProgressTips: 1, // Default is 1, display progress prompt
success: function (res) {
serverId = res.serverId; // Return the server ID of the picture
if(agent_type == 'android')
{
var localData = localIds[i]; // localData is base64 data of image, which can be displayed with img tag
//Append 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);//Delete button
id++;
}
else
{
wx.getLocalImgData({
localId: localIds[i], // localID of the picture
success: function (res) {
var localData = res.localData; // localData is base64 data of image, which can be displayed with img tag
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();
}
});
});5. The back-end core code is as follows:
foreach ($data['serverId'] as $key => $value)
{
$str = "http://File. API. Weixin. QQ. COM / CGI bin / media / get? Access? Token = ". Get 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";
}
}Effect screenshots