fe / yohobuy-node · Commits

Go to a project

Authored by hongweigao
Commit 625450558ab7d913f40a2b4ac25c828cafebd91d 1 parent 5726527c

上传多张图片，按钮样式，图片样式

Inline Side-by-side
Showing 3 changed files with 61 additions and 34 deletions
@@ -14,32 +14,31 @@ @@ -14,32 +14,31 @@
14 <div class="up-image-tips"> 14 <div class="up-image-tips">
15 为了帮助我们更好的解决问题，请您上传图片,最多可上传4张图片，每张图片大小不超过5M. 15 为了帮助我们更好的解决问题，请您上传图片,最多可上传4张图片，每张图片大小不超过5M.
16 </div> 16 </div>
17 - <ul class="up-image-list"> 17 + <ul class="up-image-list clearfix">
18 <li> 18 <li>
19 <span class="btn-del" title="删除"></span> 19 <span class="btn-del" title="删除"></span>
20 - <img src="" width="126" height="126"/>  
21 - <!--<input type="file" name="file" accept="image/*" id="upload-img-0" />--> 20 + <img src=""/>
22 <input type="hidden" name="imgs" /> 21 <input type="hidden" name="imgs" />
23 </li> 22 </li>
24 <li> 23 <li>
25 <span class="btn-del" title="删除"></span> 24 <span class="btn-del" title="删除"></span>
26 - <img src="" width="126" height="126"/>  
27 - <!--<input type="file" name="file" accept="image/*" id="upload-img-1" />--> 25 + <img src=""/>
28 <input type="hidden" name="imgs" /> 26 <input type="hidden" name="imgs" />
29 </li> 27 </li>
30 <li> 28 <li>
31 <span class="btn-del" title="删除"></span> 29 <span class="btn-del" title="删除"></span>
32 - <img src="" width="126" height="126"/>  
33 - <!--<input type="file" name="file" accept="image/*" id="upload-img-2" />--> 30 + <img src=""/>
34 <input type="hidden" name="imgs" /> 31 <input type="hidden" name="imgs" />
35 </li> 32 </li>
36 <li> 33 <li>
37 <span class="btn-del" title="删除"></span> 34 <span class="btn-del" title="删除"></span>
38 - <img src="" width="126" height="126"/>  
39 - <!--<input type="file" name="file" accept="image/*" id="upload-img-3" />--> 35 + <img src=""/>
40 <input type="hidden" name="imgs" /> 36 <input type="hidden" name="imgs" />
41 </li> 37 </li>
42 </ul> 38 </ul>
43 - <input id="upload-img-{{@key}}" type="file" name="file" multiple="true" accept="image/*" /> 39 + <div class="upload-btn">
  40 + 上传图片
  41 + <input id="upload-img-{{@key}}" type="file" name="file" multiple="true" accept="image/*" />
  42 + </div>
44 </div> 43 </div>
45 </div> 44 </div>
@@ -163,15 +163,14 @@ $goodsTable.on('click', '.btn-del', function(e) { @@ -163,15 +163,14 @@ $goodsTable.on('click', '.btn-del', function(e) {
163 resetImg($p); 163 resetImg($p);
164 }); 164 });
165 165
166 -$file.each(function(e) {  
167 - var $this = $('#upload-img-' + e),  
168 - $par = $this.closest('.problem-description'); 166 +// $file.each(function(e) {
  167 +// var $this = $('#upload-img-' + e);
169 168
170 - if (!window.location.origin) {  
171 - window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');  
172 - } 169 + // if (!window.location.origin) {
  170 + // window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
  171 + // }
173 172
174 - fileChangeEvent($this)// 173 + fileChangeEvent();//
175 174
176 // $this.qupload({ 175 // $this.qupload({
177 // button_image_url: '', 176 // button_image_url: '',
@@ -203,20 +202,17 @@ $file.each(function(e) { @@ -203,20 +202,17 @@ $file.each(function(e) {
203 // }); 202 // });
204 // } 203 // }
205 // }); 204 // });
206 -}); 205 +// });
207 206
208 -function fileChangeEvent($file) {  
209 - console.log('111111111111111'); 207 +function fileChangeEvent() {
210 208
211 // 图片上传 209 // 图片上传
212 $goodsTable.on('change', 'input[type=file]', function() { 210 $goodsTable.on('change', 'input[type=file]', function() {
213 211
214 var $f = $(this); 212 var $f = $(this);
215 - var $p = $f.siblings('.up-image-list'); 213 + var $p = $f.parent().siblings('.up-image-list');
216 214
217 - var $lis = $p.find('li:not(.selected)');  
218 - var $li = $($lis[0]);  
219 - console.log('==========================='); 215 + var $unSelectLi = $p.find('li:not(.selected)');
220 216
221 if ($f.val()) { 217 if ($f.val()) {
222 $.ajaxFileUpload({ 218 $.ajaxFileUpload({
@@ -228,25 +224,35 @@ function fileChangeEvent($file) { @@ -228,25 +224,35 @@ function fileChangeEvent($file) {
228 }, 224 },
229 dataType: 'json', 225 dataType: 'json',
230 success: function(data /* , status */) { 226 success: function(data /* , status */) {
231 - var url, relaUrl;  
232 227
233 - if (data && data.code === 200 && data.data && data.data.images && data.data.images[0]) {  
234 - url = data.data.images[0];  
235 - relaUrl = data.data.imagesList[0];  
236 - $li.find('img').attr('src', url).attr('source-url', url);  
237 - $li.find('input[name=imgs]').val(relaUrl);  
238 - $li.addClass('selected'); 228 + var resData = data.data,
  229 + len = resData.images.length > $unSelectLi.length ?
  230 + $unSelectLi.length : resData.images.length;
  231 +
  232 + if (data && data.code === 200 && data.data && data.data.images) {
  233 +
  234 + for (var i = 0; i < len; i++) {
  235 + var url, relaUrl,
  236 + $li = $($unSelectLi[i]);
  237 +
  238 + url = resData.images[i] +
  239 + '?imageMogr2/thumbnail/130x130/extent/130x130/background/d2hpdGU=/position/center/quality/90';
  240 + relaUrl = resData.imagesList[i];
  241 + $li.find('img').attr('src', url).attr('source-url', url);
  242 + $li.find('input[name=imgs]').val(relaUrl);
  243 + $li.addClass('selected');
  244 + }
  245 +
239 246
240 } else if (data && data.message) { 247 } else if (data && data.message) {
241 alert(data.message); 248 alert(data.message);
242 } 249 }
243 }, 250 },
244 - error: function() { /** data, status, e **/  
245 - alert('上传失败，请稍后再试！'); 251 + error: function(error) { /** data, status, e **/
  252 + alert('上传失败，请稍后再试！');
246 }, 253 },
247 complete: function() { 254 complete: function() {
248 $f.clone().replaceAll($f); 255 $f.clone().replaceAll($f);
249 - // fileChangeEvent($f);  
250 } 256 }
251 }); 257 });
252 } 258 }
@@ -211,6 +211,28 @@ @@ -211,6 +211,28 @@
211 background: #000; 211 background: #000;
212 } 212 }
213 213
  214 + .upload-btn {
  215 + width: 116px;
  216 + height: 33px;
  217 + position: relative;
  218 + line-height: 33px;
  219 + background: #000;
  220 + color: #fff;
  221 + text-align: center;
  222 + margin-bottom: 5px;
  223 + overflow: hidden;
  224 +
  225 + input[type='file'] {
  226 + position: absolute;
  227 + left: 0;
  228 + top: 0;
  229 + width: 100%;
  230 + height: 100%;
  231 + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  232 + opacity: 0;
  233 + }
  234 + }
  235 +
214 .btn_upload_text { 236 .btn_upload_text {
215 font-family: SimHei; 237 font-family: SimHei;
216 font-size: 16px; 238 font-size: 16px;