iwebshop fileUpload AJAX上传缩略图美化

站长手记 作者: 2024-09-03 06:05:01
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();">&nbsp;</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; }

美化后的效果如下:

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_73424.html