=============================================
互相学习电话微信：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>
扫我微信交流
原文地址：https://www.cnblogs.com/lytocnc/p/9765639.html