02
2018
11

asp微信jssdk上传图片asp程序源码

互相学习电话微信:18611436777(加微信注明事由)

微信jssdk上传图片asp程序源码

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>

 

<!--#include file="sha1.inc"-->
<!--#include file="WX-JSSDK.asp"-->

 

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="0">

 

<script src="wx_js/jquery-2.1.4.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

 


<style type="text/css">
.picItem{float:left;border: 1px solid #ccc; height: 84px;margin: 5px;width: 84px;position: relative;}
.del{bottom: 0;position: absolute;width: 40px;z-index: 2;}
</style>


<script type="text/javascript">
//基本配置Config,可修改jsApiList参数功能列表
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '<%=AppID%>',
timestamp: <%=timestamp%>,// 必填,生成签名的时间戳
nonceStr: '<%=nonceStr%>',// 必填,生成签名的随机串
signature: '<%=signature%>',// 必填,签名,见附录1
jsApiList: [
'checkJsApi',
'chooseImage',
'uploadImage'
]
});
</script>
<script>
var upMax=9; //最大上传图片数

$(function(){

//测试JS接口是否正常
$("#checkJsApi").click(function(){
wx.checkJsApi({
jsApiList: [
'chooseImage',
'uploadImage'
],
success: function (res) {
//alert(JSON.stringify(res));
alert(res.errMsg);
}
});
})

//上传图片JS
$("#upPic").click(function(){
var images = {
localId: [],
serverId: []
};
var canPic=upMax;
canPic=upMax-$(".del").length; //重新计算当前已上传图片数

wx.chooseImage({
count: canPic, // 每次可选择多少张相片
sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
images.localId = res.localIds;
//alert('已选择 ' + res.localIds.length + ' 张图片');
//开始上传
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
isShowProgressTips: 1,
success: function (res) {
$(".up").before("<div class=\"picItem\" rel=\""+res.serverId+"\"><img src=\"wx_pic/Del.png\" class=\"del\" onClick=\"javascript:delpic(this)\"><img src=\""+images.localId[i]+"\" width=\"84\" height=\"84\"></div>");
getPicItem();//重新加载Media_id_list
//$("#Media_id_list").val($("#Media_id_list").val()+res.serverId+",");
i++;
//alert('已上传');
images.serverId.push(res.serverId);
if (i < length) {
upload();
}else{
images = {localId: [],serverId: []};
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload();
}
});

})

$(".del").click(function(){
$(this).parent().remove();
getPicItem();
})

})

//删除已选择的图片
function delpic(obj){
obj.parentNode.parentNode.removeChild(obj.parentNode);
getPicItem();
}

//重新统计图片数及Media_id_list
function getPicItem()
{
//控制最大图片数
if ($('#ImgList').children('.picItem').length>upMax){
$(".up").hide();
}else{
$(".up").show();
}
var Media_id_list="";
$("#ImgList").find(".picItem:not('.up')").each(function(a,e){
Media_id_list+=$(e).attr("rel")+",";
//alert($(e).attr("rel")); 
});
$("#Media_id_list").val(Media_id_list);
}

</script>
<title>测试微信jssdk图片上传</title>
</head>
<body>

<form action="save.asp" method="post" name="sign">

<input name="a_name" type="text" class="form_input" value="<%=now()%>" />


<div id="ImgList">
<div class="picItem up" style="float:left">
<img src="wx_pic/up.jpg" id="upPic">
</div>
</div>
<br><br><br><br><br>


<input type="hidden" name="Pic" id="Media_id_list">
<input type="hidden" name="GetToken" value="<%=access_token%>" />
<input type="submit" value="提交信息" style="width:150px; height:40px; font-size:18px"/>

</form>


<br><br><br><br><br><br><br><br><br><br>
<a href="list.asp">查看asp微信jssdk上传结果图片</a>
</body>
</html>

互相学习电话微信:18611436777(加微信注明事由)


« 上一篇下一篇 »