File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
作者：zishu 来源：zishu博客 时间：2009-10-13 21:05:00
每次写完的东西就忘了，下次用时还要重查资料重新写，这是今天写的一段测试代码，保留下来，记录给自已，同时分享给大家。
目标：
把下边的这个上传文件的input样式和文字改成一句话“上传图片”，同样实现上传图片的功能。
难点
1、不同浏览器的样式表现不同。
2、文字如果只用click这样的方式是不可以的。
3、input 上的文字是没有办法更改的。
解决的方法
用Javascript 尝试了很多种方法，都不行，很麻烦。最后在网上看到一个人写的一个办法，给了些启发，于是只用两行CSS来解决这个问题。
如果直接在文字上加onclick事件来实现input的click()，这时选中文件是可以的，但这样的方式在表单submit时就失效了。所以说，file input 必须是真正的点击才有效果。
于是，就想了个办法，把input 放在文字的上边，弄成透明的，这样在点文字时，实际是点击了input，这样就实现了文件的上传。
第一步
我把input 用CSS改成比较大的，放在文字的后边，这样点文字时，其实是点了Input。
第二步
再更改一下CSS，把多出的Input部分隐藏就可以了。
最终的效果
再把Input弄成百分百透明就可以了。
完整的代码如下
<style>
#uploadImg{ font-size:12px; overflow:hidden; position:absolute}
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
</style>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>
后结
1、原理就是这样，知道了原理，你就可以随意的更改文字和样式了，改成图片，改成按钮都没有问题。
2、这种方法看上去有点土，但简单，实用，适用我电脑上的所有浏览器（ie6/ie7/firefox）。
File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器 原文地址为：http://www.zishu.cn/blogview.asp?logID=859
0
投稿猜你喜欢
如何了解SQL的执行频率
怎么样才能设计出漂亮的网页?
Xml中SelectSingleNode方法中的xpath用法
用XML创建可排序、分页的数据显示页面
Design IT. (8)，一匹“更快的马”
那些看一眼就让你难忘的广告
多栏自适应布局问题浅谈
Sql Server 2012 分页方法分析(offset and fetch)
Dreaweaver MX 2004新功能:图片处理
AJAX实现web页面中级联菜单的设计
将滚动条（scrollbar）保持在最底部的方法
你的网站使用了微格式了么
栅格:从混乱到秩序
ASP所有的Session变量获取实现代码
my sql存储过程学习总结
CSS3:文字阴影知多少
简单的asp采集代码教程
Android界面与交互设计原则
