<?php
/**
由于微信jssdk文档经常升级变动，不保证本实例能正常运行，只供参考。
必须是在微信内页打开才有用，也可以用火狐页面二维码功能，然后在微信扫一扫打开。
请开启PHP的扩展
extension=php_curl.dll
extension=php_openssl.dll
yourAppID 填写你自己的
yourAppSecret 填写你自己的
**/
//设置报错级别，忽略警告，设置字符
error_reporting(E_ALL || ~E_NOTICE);
header("Content-type:text/html; charset=utf-8");
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--因为在手机中，所以添加viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>微信测试</title>
</head>
<body>
<button id="weixin" style="display: block;margin: 2em auto">微信接口测试</button>
<button id="upload" style="display: block;margin: 2em auto">上传接口测试</button>
<button id="getServices" style="display: block;margin: 2em auto">获取已上传的图片</button>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
wx.config({
debug: true, //调试阶段建议开启
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
/*
* 所有要调用的 API 都要加到这个列表中
* 这里以图像接口为例
*/
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"
]
});
var btn = document.getElementById('weixin');
//定义images用来保存选择的本地图片ID，和上传后的服务器图片ID
var images = {
localId: [],
serverId: []
};
wx.ready(function () {
// 在这里调用 API
btn.onclick = function(){
wx.chooseImage ({
success : function(res){
images.localId = res.localIds; //保存到images
document.getElementById('img2').src=images.localId;
// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
}
document.getElementById('upload').onclick = function(){
var i = 0, len = images.localId.length;
function wxUpload(){
wx.uploadImage({
localId: images.localId[i], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
i++;
//将上传成功后的serverId保存到serverid
images.serverId.push(res.serverId);
//(serverId 即 media_id,公众号此后可根据该media_id来获取多媒体)将上传的图片通过AJAX远程提交给php下载到本地服务器
$.get("http://xxxxxxxxxx/upload.php", { media_id: res.serverId, time: "2pm" },
function(data){
//alert("AJAX Data Loaded: " + data);
});
if(i < len){
wxUpload();
}
}
});
}
wxUpload();
}
document.getElementById('getServices').onclick = function(){
alert(images.serverId);
//images.serverId 不能直接通过src读取,images.localId才可以直接赋值给img src
var a=document.getElementById ("a");
a.innerHTML = images.serverId;
}
});
});
</script>
读取serverId
<span id="a"></span>
<BR />
预览本地图片
<img src="" id="img2" >
</body>
</html>
- 1
- 2
前往页