微信jssdk上传图片asp程序源码
Posted asp,php,微信jssdk,微信小程序-学习笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信jssdk上传图片asp程序源码相关的知识，希望对你有一定的参考价值。
微信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>
以上是关于微信jssdk上传图片asp程序源码的主要内容，如果未能解决你的问题，请参考以下文章