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 })
