微信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>