微信上傳圖片（多張，點擊圖片放大，回顯圖片）

  1 /*<ul class="dataShow" id="upload-img">
  2     <li class="add-upload-file"><span>點我添加</span></li>
  3 </ul>*/
  4 var images = {
  5     localId : [],
  6     serverId : []
  7 };
  8 $.ajax({
  9     url : "",
 10     dataType : "json",
 11     data : {
 12         url : location.href.split('#')[0]
 13     },
 14     type : "post",
 15     success : function(data) {
 16         wx.config({
 17             debug : false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
 18             appId : data.data.appId, // 必填，公衆號的惟一標識
 19             timestamp : data.data.timestamp, // 必填，生成簽名的時間戳
 20             nonceStr : data.data.nonceStr, // 必填，生成簽名的隨機串
 21             signature : data.data.signature, // 必填，簽名，見附錄1
 22             jsApiList : ['downloadImage', 'chooseImage', 'uploadImage']
 23                 // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
 24             });
 25         wx.ready(function() {
 26             uploadImg();
 27             $("#submit").click(function() {//提交
 28                         var imgArr = [];
 29                         if (images.serverId.length != 2) {
 30                             for (var i = 0; i < $("#upload-img li").length; i++) {
 31                                 if (!$("#upload-img li").eq(i).hasClass("add-upload-file")) {
 32                                     if ($("#upload-img li").eq(i).find("img").attr("data-type") == "old") {
 33                                         var localIds = $("#upload-img li").eq(i).find("img").attr("src");
 34                                         imgArr.push(localIds);
 35                                     }
 36                                     if ($("#upload-img li").eq(i).find("img").attr("data-type") == "new") {
 37                                         imgArr.push(images.serverId[0]);
 38                                     }
 39                                 }
 40                             }
 41                         } else {
 42                             imgArr = images.serverId;
 43                         }
 44                         var jsonStr = {
 45                             imgArr : JSON.stringify(imgArr)
 46                         }
 47                         //這裏給後臺的值，有上次傳回的url，也有本次上傳的圖片，因此數組裏會有個圖片url和serverId;
 48                         $.ajax({
 49                                     type : 'POST',
 50                                     url : '',
 51                                     dataType : "json",
 52                                     data : jsonStr,
 53                                     success : function(obj) {
 54                                     }
 55                                 })
 56                     })
 57             }, function(data) {
 58                 alert('系統繁忙,請刷新頁面!');
 59             });
 60     },
 61     error : function(data) {
 62         alert('系統繁忙,請刷新頁面!');
 63     }
 64 });
 65 function uploadImg() {
 66     var imgNum = 3;
 67     // 若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。
 68     $(document).on('click', '.add-upload-file', function() {
 69         if ($("#upload-img li").length < imgNum) {
 70             wx.chooseImage({
 71                 debug : false,
 72                 count : imgNum - $("#upload-img li").length, // 限制圖片最多選3張
 73                 sizeType : ['compressed'], // 指定是壓縮圖
 74                 success : function(res) {
 75                     var localIds = res.localIds;
 76                     if (localIds.length > 0) {
 77                         html = "";
 78                         for (var i = 0; i < localIds.length; i++) {
 79                             html += '<li class=""><img data-local="" src="' + localIds[i] + '" data-type="new" alt="沒法顯示圖片" /><i class="deleteImg"></i></li>';
 80                         }
 81                         $('#upload-img li').eq(0).before(html);
 82                         $(".deleteImg").click(function() {
 83                             var index = $(this).parents("li").index();
 84                             $(this).parents("li").remove();
 85                             images.serverId.splice(index, 1);
 86                         });
 87                         // 下面是點擊圖片的時候獲取當前第幾個圖片而且啓用我們作的調用微信圖片瀏覽器的函數
 88                         $('#upload-img li').click(function() {
 89                             var aa = [];
 90                             var i = 0;
 91                             var src = [];
 92                             var json = null;
 93                             for (i = 0; i < $('#upload-img li').length; i++) {
 94                                 if ($('#upload-img li').eq(i).attr("class") == "") {
 95                                     src.push($('#upload-img li').eq(i).find("img").attr("src")); // 把全部的src存到數組裏
 96                                 }
 97                             }
 98                             var srcList = JSON.parse(arrayToJson(src)); // 轉換成json並賦值給srcList
 99                             var index = $(this).index();
100                             imagePreview(srcList[index], srcList);
101                         });
102                         // 判斷是手機是蘋果手機
103                         if (window.__wxjs_is_wkwebview) {
104                             for (var i = 0; i < localIds.length; i++) {
105                                 wx.getLocalImgData({
106                                     localId : localIds[i],
107                                     success : function(res) {
108                                         if (res.localData > 0) {
109                                             html = '<li class=""><img data-local="' + localIds[i] + '" src="' + res.localData + '" data-type="new" alt="沒法顯示圖片" /><i class="deleteImg"></i></li>';
110                                             $('#upload-img li').eq(0).before(html);
111                                             $(".deleteImg").click(function() {
112                                                 var index = $(this).parents("li").index();
113                                                 $(this).parents("li").remove();
114                                                 images.serverId.splice(index, 1);
115                                             })
116                                             $('#upload-img li').click(function() {
117                                                 var aa = [];
118                                                 var i = 0;
119                                                 var src = [];
120                                                 var json = null;
121                                                 for (i = 0; i < $('#upload-img li').length; i++) {
122                                                     if ($('#upload-img li').eq(i).attr("class") == "") {
123                                                         src.push($('#upload-img li').eq(i).find("img").attr("src")); // 把全部的src存到數組裏
124                                                     }
125                                                 }
126                                                 var srcList = JSON.parse(arrayToJson(src)); // 轉換成json並賦值給srcList
127                                                 var index = $(this).index();
128                                                 imagePreview(srcList[index], srcList);
129                                             });
130                                         }
131                                     }
132                                 });
133                             }
134                         }
135                         syncUpload(localIds);
136                     }
137                 },
138                 error : function(res) {
139                     alert(res, 1000);
140                 }
141             });
142         } else {
143             alert('最多上傳三張！');
144         }
145     });
146 
147 }
148 var syncUpload = function(localIds) {
149     var localId = localIds.pop();
150     wx.uploadImage({
151                 localId : localId,
152                 isShowProgressTips : 1,
153                 success : function(res) {
154                     var serverId = res.serverId; // 返回圖片的服務器端ID
155                     images.serverId.push(serverId);
156                     if (localIds.length > 0) {
157                         syncUpload(localIds);
158                     }
159                 }
160             });
161 }
162 // 下面這個函數用來轉換數組到json格式
163 function arrayToJson(o) {
164     var r = [];
165     if (typeof o == "string")
166         return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
167     if (typeof o == "object") {
168         if (!o.sort) {
169             for (var i in o)
170                 r.push(i + ":" + arrayToJson(o[i]));
171             if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
172                 r.push("toString:" + o.toString.toString());
173             }
174             r = "{" + r.join() + "}";
175         } else {
176             for (var i = 0; i < o.length; i++) {
177                 r.push(arrayToJson(o[i]));
178             }
179             r = "[" + r.join() + "]";
180         }
181         return r;
182     }
183     return o.toString();
184 }
185 // 這個是調用微信圖片瀏覽器的函數
186 function imagePreview(curSrc, srcList) {
187     // 這個檢測是否參數爲空
188     if (!curSrc || !srcList || srcList.length == 0) {
189         return;
190     }
191     // 這個使用了微信瀏覽器提供的JsAPI 調用微信圖片瀏覽器
192     WeixinJSBridge.invoke('imagePreview', {
193                 'current' : curSrc,
194                 'urls' : srcList
195             });
196 };
197 //回顯上次上傳的圖片
198 $.ajax({
199     type : 'POST',
200     url : '',
201     dataType : "json",
202     data : jsonStr,
203     success : function(obj) {
204         var html = "";
205         for(var i=0;i<obj.length;i++){
206             html += '<li class=""><img src="' + obj[i] + '" data-type="old" alt="沒法顯示圖片" /><i class="deleteImg"></i></li>';
207         }
208         html += '<li class="add-upload-file"><span>點我添加</span></li>'
209         $('#upload-img').html(html);
210         $(".deleteImg").click(function() {
211                     $(this).parents("li").remove();
212                 });
213     }
214 })