微信JSSDK上傳多圖預覽，點擊查看大圖

時間 2019-11-08
標籤微信 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}        input{margin:30px}    </style></head><body><div>    <p>上傳</p>    <div class="box"></div>    <input type="submit" id="submit"></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);       // 選擇圖片       wx.chooseImage({           count: 9,           needResult: 1,           sizeType: ['compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有           sourceType: ['camera','album'], // 能夠指定來源是相冊仍是相機，默認兩者都有           success: function (data) {               var localIds = data.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片               // 判斷設備               var xt = navigator.userAgent;               if(xt.indexOf("OS") > -1){                   // ios蘋果轉base64顯示                   for(let j=0;j<localIds.length;j++){                   //    alert(localIds.length)                       wx.getLocalImgData({                           localId: localIds[j], // 圖片的localID                           success: function (res) {                               localIds = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示                               // alert(JSON.stringify(localIds))                               // alert(1)                               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();//點擊查看大圖                               //  alert(JSON.stringify(result1))                           },                           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()//點擊查看大圖               }                syncUpload(localIds)           },           fail: function (res) {               alert("請聯繫開發人員")               //alert(JSON.stringify(res))           }       });   });    //點擊查看大圖    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)              //  alert(JSON.stringify(result1))                WeixinJSBridge.invoke("imagePreview", {                    "urls": imgs,                    "current": nowImgurl                });            });        }    }    // 最後傳給後臺服務器數組 -->list    var list=[]    var syncUpload = function(localIds) {        var localId = localIds.pop();        wx.uploadImage({            localId: localId.toString(), // 須要上傳的圖片的本地ID，由chooseImage接口得到            isShowProgressTips: 1, // 默認爲1，顯示進度提示            success: function (res) {                //res.serverId 返回圖片的服務器端ID                list.push(res.serverId);                //alert(JSON.stringify(list))                if (localIds.length > 0) {                    window.setTimeout(function () {                        syncUpload(localIds);                    }, 100);                } else {                    window.setTimeout(function () {                        downloadImage(0);                    }, 100);                }            }        })    };    // 提交    $('#submit').on('click',function () {        alert(JSON.stringify(list))    })</script></body></html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。