iwebshop fileUpload AJAX上传缩略图美化
修改 picTemplate js 模板,将模板改成如下:
<script type='text/html' id='picTemplate'>
<div class="pic">
<img class="img-thumbnail" src="<%=webroot(picRoot)%>" alt="<%=picRoot%>"/>
<a href='javascript:;' onclick="$(this).parents('.pic').remove();"> </a>
</div>
</script>
给ID thumbnails 的div 加一个 class thumbnails_box
在样式中加入以下样式:
.thumbnails_box { width:100%; height:auto; display:table; clear:both; }
.thumbnails_box .fileUpload_box { width:50px; height:50px; border:1px solid #dedede; margin-top:6px; position:relative; overflow:hidden; }
.thumbnails_box .fileUpload_box i { width:50px; height:50px; line-height:50px; color:#999; text-align:center; display:block; }
.thumbnails_box .fileUpload_box input { width:50px; height:50px; display:block; position:absolute; top:0px; left:0px; opacity:0; }
.thumbnails_box .pic { width:50px; height:50px; border:1px solid #f0f0f0; float:left; margin:6px 10px 0 0; position:relative; }
.thumbnails_box .pic img { width:50px; height:50px; border:0px; }
.thumbnails_box .pic a { width:50px; height:50px; position:absolute; top:0px; left:0px; }
.thumbnails_box .pic a::before { width:16px; height:16px; line-height:14px; text-align:center; font-size:12px; color:#fff; content:'×'; display:block; position:absolute; right:-8px; top:-8px; background:#f00; border-radius:16px; }
美化后的效果如下: