修改上传按钮样式

原创已于 2024-07-15 20:59:46 修改 · 235 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2011-07-08 12:00:38 首次发布

前端技术专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种网页中实现头像上传功能的组件设计方案。该方案利用HTML与CSS结合实现了一个简洁美观的头像预览区域，并通过JavaScript进行交互处理。用户可以通过点击上传按钮选择文件，实现头像的即时预览。

<div class="head_portrait_b">		                         
   <img id="userAvter_pic" src="#" />
</div>
<a href="javascript:void(0)" class="btn_yellow">上传</a>
<div style="width:100px;position:relative; top:-23px; left:-15px;">
<input type="file" id="userAvter" name="avter" onchange="setPic('userAvter')" size="1" style="opacity:0; filter: alpha(opacity = 0); overflow:hidden; 

cursor:pointer; border:none;" />
</div>