页面
~~~
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
<%
java.util.Map<String,String> map = (java.util.Map)request.getAttribute("map");
String nonceStr = map.get("nonceStr");
String timestamp = map.get("timestamp");
String signature = map.get("signature");
%>
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wxbf9210646fd3bb89', // 必填，公众号的唯一标识
timestamp:<%=timestamp%>, // 必填，生成签名的时间戳
nonceStr: '<%=nonceStr%>', // 必填，生成签名的随机串
signature: '<%=signature%>',// 必填，签名
jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表
});
function choosefile()
{
wx.chooseImage({
count: 2, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
for(var i=0; i<localIds.length;i++)
{
$("#imgs").append('<img src="'+localIds[i]+'" />')
}
}
});
}
</script>
</head>
<body>
<button type="button" onclick="choosefile()">选择微信图片</button>
<div id="imgs">
</div>
</body>
</html>
~~~
后台
~~~
@WebServlet("/ChooseFileServlet")
public class ChooseFileServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 得到access token
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
url = url.replace("APPID", "wxbf9210646fd3bb89");
url = url.replace("APPSECRET", "9c7874ad52b1f5ba54c5985e52ef1b82");
JSONObject obj = CommonUtil.httpsRequest(url, "GET");
String access_token = obj.getString("access_token");
//2. 得到jsapi_ticket
String url2 = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
url2 = url2.replace("ACCESS_TOKEN", access_token);
JSONObject obj2 = CommonUtil.httpsRequest(url2, "GET");
String jsapi_ticket = obj2.getString("ticket");
//3. 得到wx.config所需要的参数
String requesturl = "http://www.zyrc.tech/WeiXinJs/ChooseFileServlet";
Map<String, String> map = SignUtils.sign(jsapi_ticket, requesturl);
request.setAttribute("map", map);
request.getRequestDispatcher("/weixinchoosefile.jsp").forward(request, response);
}
}
~~~
