微信JSSDK上傳預覽多圖，ios／Android。點選檢視大圖，支援滑動。
阿新 • • 發佈：2018-12-11
<!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 (let 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>