微信上传图片（多张，点击图片放大，回显图片）

  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 })
posted @ 2019-01-15 14:05 Mr鑫阅读(962) 评论(0) 收藏举报
刷新页面返回顶部
Mr森

微信上传图片（多张，点击图片放大，回显图片）

公告
