上传图片JSP
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <%@ page language="java" import="java.util.*" pageEncoding="GBK" %>
3 <%@page import="com.wechat.base.utils.WeChatUtils"%>
4 <%
5
6 request.setAttribute("wechatMenu", "GoToOrders");
7 %>
8 <%
9 WebUtils utils = new WebUtils();
10 request.setAttribute("wechatMenu", "GoToCart");
11
12 String comIdGoToCart = (String)request.getAttribute("WeChat_ComId");
13 String urlGoToCart = (String)request.getAttribute("WeChat_Url")+"?"+(String)request.getAttribute("WeChat_QueryString");
14 HashMap wxconfig = WeChatUtils.getJSConfig(request, comIdGoToCart, urlGoToCart);
15 request.setAttribute("wxconfig", wxconfig);
16 %>
17 <html>
18 <style>
19 #imgdiv img{
20 22%;
21 margin-top:5px;
22 margin-left:5px;
23 }
24 </style>
25 <%@ include file="/wechattaglibs.jsp" %>
26 <body>
27
28 <div data-role="page" data-quicklinks="true" >
29
30 <%@ include file="/wechathead.jsp" %>
31 <!-- content start -->
32 <div data-role="content" class="myui-content" id="content-${popid}">
33 <div class="wrap" id="${popid}">
34 <section class="order-con">
35 <ul class="order-list">
36
37 <li>
38 <div class="order-box">
39 <ul class="book-list">
40 <c:forEach var="xoline" items="${xolines}">
41 <li class="border-bottom comment-li">
42 <div style="overflow:auto;">
43 <a href='${apppath}/wechat/item/d/${WeChat_ComId}.do?uid=${xoline.ITEM_ID}'>
44 <div class="order-msg" >
45 <img src="${imgapppath}${tptag:setitemminimg(xoline.ITEM_ID)}" class="img_ware" />
46 <div class="order-msg">
47 <p class="title"> ${xoline.ITEM_NAME}</p>
48 <p class="title">购买时间：<fmt:formatDate value="${xo.crttimestamp}" pattern="yyyy-MM-dd HH:mm:ss" /></p>
49 <br>
50 </div>
51 </div>
52 </a>
53 <a data-theme="a" class="showCommentBt ui-btn ui-btn-inline ui-mini ui-corner-all myui-fr" style="background-color: #44b549;border: 1px solid #44b549;color: #fff;text-shadow: 0 1px 0 #44b549;" data-ajax="false" href="#">点击评价</a>
54 </div>
55 <div class="commentDiv comment-box myui-hide" style="overflow:auto; border: 1px solid #d0e4c2; text-align: left;">
56 <form id='frmComment' class="frmComment" method='post'>
57 <div class="item score" style="margin-top: 20px;margin-bottom: 20px;">
58 <span class="label">
59 <em>*</em>评分：
60 </span>
61 <div class="myui-fl">
62 <span class="commstar">
63 <a href="javascript:;" class="star1 " val="1"></a>
64 <a href="javascript:;" class="star2 " val="2"></a>
65 <a href="javascript:;" class="star3 " val="3"></a>
66 <a href="javascript:;" class="star4 " val="4"></a>
67 <a href="javascript:;" class="star5 active" val="5"></a>
68 </span>
69 <input type="hidden" name="serverId" class="serverId" value="" />
70 <input type="hidden" name="grade" id="commentStar" value="5" />
71 <input type="hidden" name="coNum" id="coNum" value="${xo.coNum}" />
72 <input type="hidden" name="itemId" id="itemId" value="${xoline.ITEM_ID}" />
73 <input type="hidden" name="lineNum" id="lineNum" value="${xoline.LINE_NUM}" />
74 </div>
75 </div>
76 <div class="item reviews" >
77 <span class="label">
78 <em>*</em>心得：
79 </span>
80 <div class="fl">
81 <div class="summary-cont">
82 <div class="sumy-area">
83 <div>
84 <textarea data-role="none" name="review" id="review_textarea" class="" cols="30" rows="10" placeholder="商品是否给力？快写下评论，分享给大家吧！" ></textarea>
85 </div>
86 <div class="myui-fr" style="margin-right:10px;" id="review_div">1-250字</div>
87 </div>
88 </div>
89
90 </div>
91 </div>
92 <div id="imgdiv" style="border:dashed 1px;height: 200px; 80%;display: none;margin-left: 10%">
93
94 </div><br />
95 <div class="bd spacing">
96 <a href="javascript:;" class="weui_btn weui_btn_primary stBtn" style="background-color: #44b549;border: 1px solid #44b549;color: #fff;text-shadow: 0 1px 0 #44b549;"><span class="xz" >晒图</span></a>
97 </div>
98 <div class="item saveBt" >
99 <a data-theme="a" class="ui-btn ui-btn-inline ui-mini ui-corner-all myui-fr"
100 style="background-color: #44b549;border: 1px solid #44b549;color: #fff;text-shadow: 0 1px 0 #44b549;"
101 data-ajax="false" href="#">发表评价</a>
102
103 </div>
104 </form>
105 </div>
106 </li>
107
108 </c:forEach>
109
110 </ul>
111 </div>
112 </li>
113
114 </ul>
115
116 </section>
117 </div>
118 </div>
119 <!-- content end -->
120 <%@ include file="/wechatfooter.jsp" %>
121 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
122 <script language = "javascript" >
123 $(function(){
124 wx.config({
125 debug: false,
126 appId: '${wxconfig.appID}',
127 timestamp: '${wxconfig.timestamp}',
128 nonceStr: '${wxconfig.nonce}',
129 signature: '${wxconfig.signature}',
130 jsApiList: [
131 'chooseImage',
132 'uploadImage',
133 'downloadImage'
134 ]
135 });
136 var images = {
137 localId: [],
138 serverId: []
139 };
140 $("#content-${popid} .stBtn").click(function(){
141 var formObj = $(this).parents(".frmComment");
142 $('.serverId',formObj).val("");
143 wx.ready(function(){
144 //拍照或从手机相册中选图接口
145 wx.chooseImage({
146 count: 5, // 最多能选择多少张图片，默认9
147 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
148 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
149 success: function (res) {
150 var localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
151 var localIdImg=localId.toString().split(",");
152 //上传图片接口
153
154 if (localIdImg.length == 0) {
155 return;
156 }
157 var i = 0, length = images.localId.length;
158 images.serverId = [];
159 function upload() {
160 wx.uploadImage({
161 localId: localId[i],
162 success: function (res) {
163 $("#content-${popid} #imgdiv").append("<img src=""+localIdImg[i]+"" />");
164 i++;
165 images.serverId.push(res.serverId);
166 var tmpServerId = $('.serverId',formObj).val();
167 $('.serverId',formObj).val(tmpServerId+res.serverId+",");
168 if (i < localIdImg.length) {
169 upload();
170 }
171 if(localIdImg.length>3){
172 $("#content-${popid} #imgdiv").height("200px");
173 }
174 $("#content-${popid} #imgdiv").show();
175 $("#content-${popid} .stBtn").hide();
176 $("#content-${popid} .saveBt a").hide();
177 $("#content-${popid} .stBtn").show();
178 $("#content-${popid} .saveBt a").show();
179 },
180
181 fail: function (res) {
182 alert(JSON.stringify(res));
183 }
184 });
185 }
186 upload();
187
188 }
189 });
190
191 });
192
193 });
194 var w = $(window).width();
195 $("#content-${popid} .reviews #review_textarea").width( w-150);
196 $("#content-${popid} .reviews #review_textarea").change( function(){
197 var review_val = $(this).val();
198 if( review_val.length >250 ){
199 $("#content-${popid} .reviews #review_div").html("超出字数"+( review_val.length - 250 )+"个字！");
200 }else{
201 $("#content-${popid} .reviews #review_div").html("还可输入"+( 250-review_val.length )+"个字！");
202 }
203 });
204
205 $("#content-${popid} .showCommentBt").on('click',function(){
206 $(this).hide();
207 var objLi = $(this).parents(".comment-li");
208 $(".commentDiv",objLi).show();
209 });
210 $("#content-${popid} .commentDiv .commstar a").on('click',function(){
211 $("#content-${popid} .commentDiv .commstar a").removeClass("active");
212 $(this).addClass("active");
213 $("#content-${popid} .commentDiv #commentStar").val( $(this).attr("val") );
214 });
215 $("#content-${popid} .saveBt a").on('click',function(){
216 var formObj = $(this).parents(".frmComment");
217 var tmp = $('.serverId',formObj).val();
218 if( $("#content-${popid} .reviews #review_textarea").val() == ""){
219 alert("请输入购买心得！");
220 return;
221 }
222 var dataSend = formObj.serializeArray();
223
224 $.post('${apppath}/wechat/order/commentsave/${WeChat_ComId}.do',dataSend,
225 function (data){
226 alert(data.msg);
227 if(data.code == '1'){
228 var objLi = $(formObj).parents(".comment-li");
229 $(".commentDiv",objLi).hide();
230 }
231 }
232 );
233 });
234 });
235
236 </script>
237 </div><!-- /page -->
238 </body>
239 </html>