=============================================
互相学习电话微信：18611436777（加微信注明事由）
<!--#include file="Function.asp" -->
<%
timestamp = Datediff("s","1970-01-01 00:00:00",now)
nonceStr = MakeRandStr(32)
signature = Get_Sign()
%>
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: \'<%= AppId %>\', // 必填，公众号的唯一标识
timestamp: <%= timestamp %>, // 必填，生成签名的时间戳
nonceStr: \'<%= nonceStr %>\', // 必填，生成签名的随机串
signature: \'<%= signature %>\',// 必填，签名，见附录1
jsApiList: [
\'checkJsApi\',
\'onMenuShareTimeline\',
\'onMenuShareAppMessage\',
\'onMenuShareQQ\',
\'onMenuShareWeibo\',
\'onMenuShareQZone\',
\'hideMenuItems\',
\'showMenuItems\',
\'hideAllNonBaseMenuItem\',
\'showAllNonBaseMenuItem\',
\'translateVoice\',
\'startRecord\',
\'stopRecord\',
\'onVoiceRecordEnd\',
\'playVoice\',
\'onVoicePlayEnd\',
\'pauseVoice\',
\'stopVoice\',
\'uploadVoice\',
\'downloadVoice\',
\'chooseImage\',
\'previewImage\',
\'uploadImage\',
\'downloadImage\',
\'getNetworkType\',
\'openLocation\',
\'getLocation\',
\'hideOptionMenu\',
\'showOptionMenu\',
\'closeWindow\',
\'scanQRCode\',
\'chooseWXPay\',
\'openProductSpecificView\',
\'addCard\',
\'chooseCard\',
\'openCard\'
]
});
wx.ready(function(){
var upMax=6;//最大上传数量
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
$(".chooseImage").click(function(){
var canPic=upMax;
canPic=upMax-$(".delimg").length; //重新计算可上传图片数
wx.chooseImage({
count: canPic, // 默认9
sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
syncUpload(localIds);
}
});
});
var syncUpload = function(localIds){
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
isShowProgressTips:0,
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
$.get("SaveImg.asp?media_id="+serverId, function(result){
$("#img").append("<li class=\'weui_uploader_file\'><img src=\'"+result+"\'/><i class=\'delimg\'>X</i></li>");
getPicItem();
});
if(localIds.length > 0){
syncUpload(localIds);
}
}
});
};
//获取定位
//$(".getLocation").on("click", function(){
wx.getLocation({
type: \'gcj02\', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入\'gcj02\'
success: function (res) {
var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
$("#p_LatLng").html(longitude+\',\'+latitude); //用户的坐标
var url=\'GetAddress.asp?lat=\'+latitude+\'&lng=\'+longitude;
$.ajax({
type:"get",
cache:false,
url:url,
success:function(res)
{
$("#p_Address").html(res); //中文地址
}
});
},
cancel: function (res) {
alert(\'用户拒绝授权获取地理位置\',\'\');
}
});
//});
//删除图片
$(document).on("click", ".delimg", function() {
$(this).parent().remove();
getPicItem();
})
//统计图片数
function getPicItem()
{
//控制最大图片数
var nowNum=$(\'.weui_uploader_file\').length;
if (nowNum>=upMax){
$(".chooseImage").hide();
}else{
$(".chooseImage").show();
}
var Pic_List="";
$(".weui_uploader_file").each(function(){
var pic =$(this).find(\'img\').attr("src");
Pic_List+=pic+"|";
});
$("#p_PicList").html(Pic_List);
}
});
</script>
<style>
#img{ margin:0px; padding:0px}
#img li{ width:100px; height:100px; position:relative; display:inline; float:left; margin:3px}
#img li img{width:100px; height:100px}
#img li i{ position:absolute; right:0px; top:0px; width:30px; height:30px; text-align:center; line-height:30px; background-color:#FF0000; color:#FFFFFF}
</style>
</head>
<body>
<div>
<button class="chooseImage" >选择图片</button>
<button class="getLocation">地理位置</button>
</div>
<ul id="img"></ul>
<div id="p_LatLng"></div>
<div id="p_Address"></div>
<div id="p_PicList"></div>
</body>
</html>
扫我微信交流