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 @@
为了帮助我们更好的解决问题，请您上传图片,最多可上传4张图片，每张图片大小不超过5M.
</div>
<ul class="up-image-list">
<li></li>
<li></li>
<li></li>
<li></li>
<li>
<span class="btn-del" title="删除"></span>
<img src="" width="126" height="126"/>
<!--<input type="file" name="file" accept="image/*" id="upload-img-0" />-->
<input type="hidden" name="imgs" />
</li>
<li>
<span class="btn-del" title="删除"></span>
<img src="" width="126" height="126"/>
<!--<input type="file" name="file" accept="image/*" id="upload-img-1" />-->
<input type="hidden" name="imgs" />
</li>
<li>
<span class="btn-del" title="删除"></span>
<img src="" width="126" height="126"/>
<!--<input type="file" name="file" accept="image/*" id="upload-img-2" />-->
<input type="hidden" name="imgs" />
</li>
<li>
<span class="btn-del" title="删除"></span>
<img src="" width="126" height="126"/>
<!--<input type="file" name="file" accept="image/*" id="upload-img-3" />-->
<input type="hidden" name="imgs" />
</li>
</ul>
<input id="upload-img-{{@key}}" type="file" />
<input id="upload-img-{{@key}}" type="file" name="file" multiple="true" accept="image/*" />
</div>
</div>
\ No newline at end of file
</div>
... ...
... ... @@ -37,6 +37,7 @@ var pageType = 0, // 0-换货 1-退货
timer;
require('../plugins/jquery.qupload');
require('../common/ajaxfileupload');
if (defaultPhone) {
$hidePhone.remove();
... ... @@ -86,6 +87,13 @@ function setBackInput(type) {
}
}
var resetImg = function($p) {
$p.removeClass('selected');
$p.find('input[name=imgs]').val('');
$p.find('img').attr('src', '');
};
if ($refundInfo.length) {
pageType = 1;
... ... @@ -148,8 +156,11 @@ $goodsTable.on('change', '.exchange-color', function() {
$warp.find('.exchange-size').html(_html).val(0);
});
$goodsTable.on('click', '.btn-del', function() {
$(this).parent().empty();
$goodsTable.on('click', '.btn-del', function(e) {
var $p = $(this).closest('li');
e.stopPropagation();
resetImg($p);
});
$file.each(function(e) {
... ... @@ -159,37 +170,88 @@ $file.each(function(e) {
if (!window.location.origin) {
window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
}
$this.qupload({
button_image_url: '',
upload_url: window.location.origin + '/home/returns/imgUpload',
file_post_name: 'fileData',
button_text: '<span class="btn_upload_text">上传图片</span>',
button_text_style: '.btn_upload_text{color: #ffffff;}',
button_width: 116,
button_height: 33,
button_text_left_padding: 32,
button_text_top_padding: 8,
button_action: window.SWFUpload.BUTTON_ACTION.SELECT_FILE,
file_size_limit: '10240',
file_types: '*.jpg;*.jpeg;*.png;*.bmp',
uploadSuccessed: function(data) {
var $imgList = $par.find('li'),
isShow = false,
img, _html;
img = JSON.parse(data).imgList[0];
_html = '<span class="btn-del" title="删除"></span>' +
'<img src="' + img[0] + '" width="126" height="126">' +
'<input type="hidden" name="imgs" value="' + img.imgRelUrl + '">';
$imgList.each(function() {
if (!isShow && !$(this).find('img').length) {
isShow = true;
$(this).html(_html);
fileChangeEvent($this)//
// $this.qupload({
// button_image_url: '',
// upload_url: window.location.origin + '/home/returns/imgUpload',
// file_post_name: 'fileData',
// button_text: '<span class="btn_upload_text">上传图片</span>',
// button_text_style: '.btn_upload_text{color: #ffffff;}',
// button_width: 116,
// button_height: 33,
// button_text_left_padding: 32,
// button_text_top_padding: 8,
// button_action: window.SWFUpload.BUTTON_ACTION.SELECT_FILE,
// file_size_limit: '10240',
// file_types: '*.jpg;*.jpeg;*.png;*.bmp',
// uploadSuccessed: function(data) {
// var $imgList = $par.find('li'),
// isShow = false,
// img, _html;
//
// img = JSON.parse(data).imgList[0];
// _html = '<span class="btn-del" title="删除"></span>' +
// '<img src="' + img[0] + '" width="126" height="126">' +
// '<input type="hidden" name="imgs" value="' + img.imgRelUrl + '">';
// $imgList.each(function() {
// if (!isShow && !$(this).find('img').length) {
// isShow = true;
// $(this).html(_html);
// }
// });
// }
// });
});
function fileChangeEvent($file) {
console.log('111111111111111');
// 图片上传
$goodsTable.on('change', 'input[type=file]', function() {
var $f = $(this);
var $p = $f.siblings('.up-image-list');
var $lis = $p.find('li:not(.selected)');
var $li = $($lis[0]);
console.log('===========================');
if ($f.val()) {
$.ajaxFileUpload({
url: '/common/upload/image',
secureuri: false,
fileElementId: $f,
data: {
bucket: 'evidenceImages'
},
dataType: 'json',
success: function(data /* , status */) {
var url, relaUrl;
if (data && data.code === 200 && data.data && data.data.images && data.data.images[0]) {
url = data.data.images[0];
relaUrl = data.data.imagesList[0];
$li.find('img').attr('src', url).attr('source-url', url);
$li.find('input[name=imgs]').val(relaUrl);
$li.addClass('selected');
} else if (data && data.message) {
alert(data.message);
}
},
error: function() { /** data, status, e **/
alert('上传失败，请稍后再试！');
},
complete: function() {
$f.clone().replaceAll($f);
// fileChangeEvent($f);
}
});
}
});
});
}
$exchange.on('change', '#area', function() {
var code = $(this).val() * 1;
... ...
... ... @@ -174,6 +174,12 @@
margin: 0 0 10px 10px;
background: resolve('home/up-pic-back.png') no-repeat;
position: relative;
img {
width: 100%;
height: 100%;
display: none;
}
}
.up-image-list li:first-child {
... ... @@ -184,13 +190,23 @@
padding: 8px;
background: resolve('home/del-icon.png') no-repeat;
color: #468fa2;
display: inline-block;
display: none;
position: absolute;
right: -1px;
z-index: 5;
cursor: pointer;
}
.up-image-list .selected {
> img {
display: block;
}
.btn-del {
display: inline-block;
}
}
.swfupload {
background: #000;
}
... ...