<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script src="../js/base/jquery-3.1.1.min.js"></script> <script src="../js/base/src.js"></script> <script src="../js/base/http.js"></script> <title>Title</title> <style> *{margin: 0;padding: 0} p{ padding: 20px; background: red; color: #fff; text-align: center; font-size: 14px; } li{ font-style: normal; display: inline-block; border:1px solid blue; margin: 10px; } img{height: 200px} </style></head><body><div> <p>上传</p> <div class="box"></div></div><script> // AJAX请求微信配置 function getWxData() { var wxUrl=window.location.href; var url = http + "wx/offAct/jssdkCon"; var data={ "url":wxUrl, "org":"xn" }; // console.log(wxUrl) httpHelper.post(url, data, function(data){ var appId = data[‘data‘]["appId"]; var timestamp = data[‘data‘][‘timestamp‘]; var nonceStr = data["data"][‘nonceStr‘]; var signature = data[‘data‘][‘signature‘]; var jsApiList = data[‘data‘][‘jsApiList‘]; var beta=data[‘data‘][‘beta‘]; var debug=data[‘data‘][‘debug‘]; // console.log(data) // alert(JSON.stringify(data)) wx.config({ beta: beta,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: appId, // 必填，企业微信的corpID timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串 signature: signature,// 必填，签名，见附录1 jsApiList:jsApiList ,// 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); }); } getWxData();//微信
// 上传预览多张图片 $(‘p‘).on(‘click‘,function () { $(‘box‘).empty() var that = $(this),result1; wx.chooseImage({ count: 9, needResult: 1, sizeType: [‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有 sourceType: [‘camera‘,‘album‘], // 可以指定来源是相册还是相机，默认二者都有 success: function (data) { var localIds = data.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 for (var i = 0; i < localIds.length; i++) { wx.uploadImage({ localId: localIds[i], success: function (res) { result1 = res.serverId; // 返回图片的服务器端ID // 判断设备 var xt = navigator.userAgent; if(xt.indexOf("OS") > -1){ // ios苹果 for(let j=0;j<localIds.length;j++){ wx.getLocalImgData({ localId: localIds[j], // 图片的localID success: function (res) { localIds = res.localData; // localData是图片的base64数据，可以用img标签显示 var html="",ht="",ml=""; if(localIds==1){ ht="<li><img src=‘"+res.localData+"‘ alt=‘‘></li>" }else { ml+="<li><img src=‘"+res.localData+"‘ alt=‘‘></li>" } html+=ht+ml; $(‘.box‘).append(html); funcReadImgInfo();//点击查看大图 }, fail: function (res) { // alert("请联系开发人员") alert(JSON.stringify(res)) } }); } }else { // 安卓android var html,ht,ml; if(localIds==1){ ht="<li><img src=‘"+res.serverId+"‘ ></li>" }else { ml+="<li><img src=‘"+res.serverId+"‘></li>" } html+=ht+ml $(‘.box‘).append(html); funcReadImgInfo()//点击查看大图 } } }); } }, fail: function (res) { alert("请联系开发人员") //alert(JSON.stringify(res)) } }); })
// 最后传给后台服务器返回的ID -->result1 //点击查看大图 function funcReadImgInfo() { var imgs = []; var imgObj = $(".box img");//这里改成相应的对象 for (var i = 0; i < imgObj.length; i++) { imgs.push(imgObj.eq(i).attr(‘src‘)); imgObj.eq(i).click(function () { var nowImgurl = $(this).attr(‘src‘); //alert(nowImgurl) WeixinJSBridge.invoke("imagePreview", { "urls": imgs, "current": nowImgurl }); }); } }</script></body></html>
原文地址：https://www.cnblogs.com/qianxiaojing/p/9685895.html
时间： 2024-10-10 09:17:10