微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法

微信应用
2024-10-14 12:14:02

微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法
参数描述appId公众号的唯一标识应用idtimestamp生成签名的时间戳nonceStr生成签名的随机串signature签名上述表格中的四个参数是初始化调用微信jsapi的凭证，咱们在前几节已经反复说明如何使用了，在这里就不在贴出如何生成上述四个参数了，不懂得初学者点击链接http://

参数

描述appId公众号的唯一标识应用idtimestamp生成签名的时间戳nonceStr生成签名的随机串signature签名

上述表格中的四个参数是初始化调用微信jsapi的凭证，咱们在前几节已经反复说明如何使用了，在这里就不在贴出如何生成上述四个参数了

完整的jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>微信jsapi测试-V型知识库</title> <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> <scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> </head> <body> <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center> <p>基础接口之判断当前客户端是否支持指定的js接口</p> <input type="button" value="checkJSAPI" id="checkJsApi"><br> <h3 id="menu-image">图像接口</h3> <span class="desc">拍照或从手机相册中选图接口</span><br> <button class="btn btn_primary" id="chooseImage">chooseImage</button><br> <span class="desc">预览图片接口</span><br> <button class="btn btn_primary" id="previewImage">previewImage</button><br> <span class="desc">上传图片接口</span><br> <button class="btn btn_primary" id="uploadImage">uploadImage</button><br> <span class="desc">下载图片接口</span><br> <button class="btn btn_primary" id="downloadImage">downloadImage</button><br> 显示图片<imgalt=""src=""id="faceImg"data-bd-imgshare-binded="1"> <br> <script type="text/javascript"> wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '${appId}', // 必填，公众号的唯一标识 timestamp: '${ timestamp}' , // 必填，生成签名的时间戳 nonceStr: '${ nonceStr}', // 必填，生成签名的随机串 signature: '${ signature}',// 必填，签名，见附录1 jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function(){ // 5 图片接口 // 5.1 拍照、本地选图 var images = { localId: [], serverId: [] }; document.querySelector('#chooseImage').onclick = function () { wx.chooseImage({ success: function (res) { images.localId = res.localIds; alert('已选择 ' + res.localIds.length + ' 张图片');$("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上 } }); }; // 5.2 图片预览 document.querySelector('#previewImage').onclick = function () { wx.previewImage({ current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg', urls: [ 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg', 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg', 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg' ] }); }; // 5.3 上传图片 document.querySelector('#uploadImage').onclick = function () { if (images.localId.length == 0) { alert('请先使用 chooseImage 接口选择图片'); return; } var i = 0, length = images.localId.length; images.serverId = []; function upload() { wx.uploadImage({ localId: images.localId[i], success: function (res) { i++; //alert('已上传：' + i + '/' + length); images.serverId.push(res.serverId); if (i < length) { upload(); } }, fail: function (res) { alert(JSON.stringify(res)); } }); } upload(); }; // 5.4 下载图片 document.querySelector('#downloadImage').onclick = function () { if (images.serverId.length === 0) { alert('请先使用 uploadImage 上传图片'); return; } var i = 0, length = images.serverId.length; images.localId = []; function download() { wx.downloadImage({ serverId: images.serverId[i], success: function (res) { i++; alert('已下载：' + i + '/' + length); images.localId.push(res.localId); if (i < length) { download(); } } }); } download(); };}); //初始化jsapi接口状态wx.error(function (res) { alert("调用微信jsapi返回的状态:"+res.errMsg);}); </script> </body></html>

微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法由讯客互联微信应用栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法”