微信JSSDK上传多图预览，点击查看大图
Posted qianxiaojing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信JSSDK上传多图预览，点击查看大图相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于微信JSSDK上传多图预览，点击查看大图的主要内容，如果未能解决你的问题，请参考以下文章