fe / yohobuy-node · Commits

Go to a project

Authored by hongweigao
Commit 5726527cac3d2572616c0109986aa06a28ff535e 1 parent 8138b72e

上传图片

Inline Side-by-side
Showing 3 changed files with 134 additions and 36 deletions
@@ -15,11 +15,31 @@ @@ -15,11 +15,31 @@
15 为了帮助我们更好的解决问题，请您上传图片,最多可上传4张图片，每张图片大小不超过5M. 15 为了帮助我们更好的解决问题，请您上传图片,最多可上传4张图片，每张图片大小不超过5M.
16 </div> 16 </div>
17 <ul class="up-image-list"> 17 <ul class="up-image-list">
18 - <li></li>  
19 - <li></li>  
20 - <li></li>  
21 - <li></li> 18 + <li>
  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" />-->
  22 + <input type="hidden" name="imgs" />
  23 + </li>
  24 + <li>
  25 + <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" />-->
  28 + <input type="hidden" name="imgs" />
  29 + </li>
  30 + <li>
  31 + <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" />-->
  34 + <input type="hidden" name="imgs" />
  35 + </li>
  36 + <li>
  37 + <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" />-->
  40 + <input type="hidden" name="imgs" />
  41 + </li>
22 </ul> 42 </ul>
23 - <input id="upload-img-{{@key}}" type="file" /> 43 + <input id="upload-img-{{@key}}" type="file" name="file" multiple="true" accept="image/*" />
24 </div> 44 </div>
25 -</div>  
  45 +</div>
@@ -37,6 +37,7 @@ var pageType = 0, // 0-换货 1-退货 @@ -37,6 +37,7 @@ var pageType = 0, // 0-换货 1-退货
37 timer; 37 timer;
38 38
39 require('../plugins/jquery.qupload'); 39 require('../plugins/jquery.qupload');
  40 +require('../common/ajaxfileupload');
40 41
41 if (defaultPhone) { 42 if (defaultPhone) {
42 $hidePhone.remove(); 43 $hidePhone.remove();
@@ -86,6 +87,13 @@ function setBackInput(type) { @@ -86,6 +87,13 @@ function setBackInput(type) {
86 } 87 }
87 } 88 }
88 89
  90 +var resetImg = function($p) {
  91 + $p.removeClass('selected');
  92 + $p.find('input[name=imgs]').val('');
  93 + $p.find('img').attr('src', '');
  94 +};
  95 +
  96 +
89 if ($refundInfo.length) { 97 if ($refundInfo.length) {
90 pageType = 1; 98 pageType = 1;
91 99
@@ -148,8 +156,11 @@ $goodsTable.on('change', '.exchange-color', function() { @@ -148,8 +156,11 @@ $goodsTable.on('change', '.exchange-color', function() {
148 $warp.find('.exchange-size').html(_html).val(0); 156 $warp.find('.exchange-size').html(_html).val(0);
149 }); 157 });
150 158
151 -$goodsTable.on('click', '.btn-del', function() {  
152 - $(this).parent().empty(); 159 +$goodsTable.on('click', '.btn-del', function(e) {
  160 + var $p = $(this).closest('li');
  161 +
  162 + e.stopPropagation();
  163 + resetImg($p);
153 }); 164 });
154 165
155 $file.each(function(e) { 166 $file.each(function(e) {
@@ -159,37 +170,88 @@ $file.each(function(e) { @@ -159,37 +170,88 @@ $file.each(function(e) {
159 if (!window.location.origin) { 170 if (!window.location.origin) {
160 window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : ''); 171 window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
161 } 172 }
162 - $this.qupload({  
163 - button_image_url: '',  
164 - upload_url: window.location.origin + '/home/returns/imgUpload',  
165 - file_post_name: 'fileData',  
166 - button_text: '<span class="btn_upload_text">上传图片</span>',  
167 - button_text_style: '.btn_upload_text{color: #ffffff;}',  
168 - button_width: 116,  
169 - button_height: 33,  
170 - button_text_left_padding: 32,  
171 - button_text_top_padding: 8,  
172 - button_action: window.SWFUpload.BUTTON_ACTION.SELECT_FILE,  
173 - file_size_limit: '10240',  
174 - file_types: '*.jpg;*.jpeg;*.png;*.bmp',  
175 - uploadSuccessed: function(data) {  
176 - var $imgList = $par.find('li'),  
177 - isShow = false,  
178 - img, _html;  
179 -  
180 - img = JSON.parse(data).imgList[0];  
181 - _html = '<span class="btn-del" title="删除"></span>' +  
182 - '<img src="' + img[0] + '" width="126" height="126">' +  
183 - '<input type="hidden" name="imgs" value="' + img.imgRelUrl + '">';  
184 - $imgList.each(function() {  
185 - if (!isShow && !$(this).find('img').length) {  
186 - isShow = true;  
187 - $(this).html(_html); 173 +
  174 + fileChangeEvent($this)//
  175 +
  176 + // $this.qupload({
  177 + // button_image_url: '',
  178 + // upload_url: window.location.origin + '/home/returns/imgUpload',
  179 + // file_post_name: 'fileData',
  180 + // button_text: '<span class="btn_upload_text">上传图片</span>',
  181 + // button_text_style: '.btn_upload_text{color: #ffffff;}',
  182 + // button_width: 116,
  183 + // button_height: 33,
  184 + // button_text_left_padding: 32,
  185 + // button_text_top_padding: 8,
  186 + // button_action: window.SWFUpload.BUTTON_ACTION.SELECT_FILE,
  187 + // file_size_limit: '10240',
  188 + // file_types: '*.jpg;*.jpeg;*.png;*.bmp',
  189 + // uploadSuccessed: function(data) {
  190 + // var $imgList = $par.find('li'),
  191 + // isShow = false,
  192 + // img, _html;
  193 + //
  194 + // img = JSON.parse(data).imgList[0];
  195 + // _html = '<span class="btn-del" title="删除"></span>' +
  196 + // '<img src="' + img[0] + '" width="126" height="126">' +
  197 + // '<input type="hidden" name="imgs" value="' + img.imgRelUrl + '">';
  198 + // $imgList.each(function() {
  199 + // if (!isShow && !$(this).find('img').length) {
  200 + // isShow = true;
  201 + // $(this).html(_html);
  202 + // }
  203 + // });
  204 + // }
  205 + // });
  206 +});
  207 +
  208 +function fileChangeEvent($file) {
  209 + console.log('111111111111111');
  210 +
  211 + // 图片上传
  212 + $goodsTable.on('change', 'input[type=file]', function() {
  213 +
  214 + var $f = $(this);
  215 + var $p = $f.siblings('.up-image-list');
  216 +
  217 + var $lis = $p.find('li:not(.selected)');
  218 + var $li = $($lis[0]);
  219 + console.log('===========================');
  220 +
  221 + if ($f.val()) {
  222 + $.ajaxFileUpload({
  223 + url: '/common/upload/image',
  224 + secureuri: false,
  225 + fileElementId: $f,
  226 + data: {
  227 + bucket: 'evidenceImages'
  228 + },
  229 + dataType: 'json',
  230 + success: function(data /* , status */) {
  231 + var url, relaUrl;
  232 +
  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');
  239 +
  240 + } else if (data && data.message) {
  241 + alert(data.message);
  242 + }
  243 + },
  244 + error: function() { /** data, status, e **/
  245 + alert('上传失败，请稍后再试！');
  246 + },
  247 + complete: function() {
  248 + $f.clone().replaceAll($f);
  249 + // fileChangeEvent($f);
188 } 250 }
189 }); 251 });
190 } 252 }
191 }); 253 });
192 -}); 254 +}
193 255
194 $exchange.on('change', '#area', function() { 256 $exchange.on('change', '#area', function() {
195 var code = $(this).val() * 1; 257 var code = $(this).val() * 1;
@@ -174,6 +174,12 @@ @@ -174,6 +174,12 @@
174 margin: 0 0 10px 10px; 174 margin: 0 0 10px 10px;
175 background: resolve('home/up-pic-back.png') no-repeat; 175 background: resolve('home/up-pic-back.png') no-repeat;
176 position: relative; 176 position: relative;
  177 +
  178 + img {
  179 + width: 100%;
  180 + height: 100%;
  181 + display: none;
  182 + }
177 } 183 }
178 184
179 .up-image-list li:first-child { 185 .up-image-list li:first-child {
@@ -184,13 +190,23 @@ @@ -184,13 +190,23 @@
184 padding: 8px; 190 padding: 8px;
185 background: resolve('home/del-icon.png') no-repeat; 191 background: resolve('home/del-icon.png') no-repeat;
186 color: #468fa2; 192 color: #468fa2;
187 - display: inline-block; 193 + display: none;
188 position: absolute; 194 position: absolute;
189 right: -1px; 195 right: -1px;
190 z-index: 5; 196 z-index: 5;
191 cursor: pointer; 197 cursor: pointer;
192 } 198 }
193 199
  200 + .up-image-list .selected {
  201 + > img {
  202 + display: block;
  203 + }
  204 +
  205 + .btn-del {
  206 + display: inline-block;
  207 + }
  208 + }
  209 +
194 .swfupload { 210 .swfupload {
195 background: #000; 211 background: #000;
196 } 212 }