任意美化你的文件域 <input type="file" /> 兼容各浏览器

样式:

.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile
{position:absolute;top:-100px;}
.upFileBtn
{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}

 HTML:

        <div class="fileInput left">
          <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
          <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
        </div>
<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>

 Demo:

图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。
另外写了一篇类似的文件,没有js,详细分析过程。
http://www.cnblogs.com/dreamback/archive/2012/12/25/input-file-css-beautify.html

posted @ 2011-10-12 14:07  孟回头  阅读(18104)  评论(4编辑  收藏  举报