软件学堂

网游分类软件分类

改变单调的文件上传控件样式

2012-11-10 来源:网络

【实例名称】

改变单调的文件上传控件样式

【实例描述】

file控件是一个标准的HTML控件,可用来实现文件的选择和上传,但其样式过于单调,有时候用户会要求改变这种上传文件控件的样式。本例学习如何改变此控件的样式。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <style type="text/css"> #myInput{border:1px solid #0000FF;} #myBtn{width:90px;height:21px;font-size:12px; padding-top:3px;border-left:1px solid #FFFFFF; border-top:1px solid #FFFFFF;border-right:1px solid #666666; border-bottom:1px solid #666666} </style> </head> <body> <input type="text" id="myInput" > <input type="button" id="myBtn" value="选择上传的文件"> <input type="file" id="myfile" onchange="myInput.value=this.value" style="width:0;position:absolute;left:43mm; filter:alpha(opacity=10)"></body> </html>

【运行效果】

 改变上传文件控件的样式运行效果

【难点剖析】

本例利用了层的概念。将自己创建的按钮放在默认file按钮的上面,这样用户看到的就是带有样式的按钮,当用户单击此按钮时,实际上还是触发的file控件的事件,在此事件中设置文本框的内容即可。

【源码下载】

为了JS代码的准确性,请点击:改变上传文件控件的样式 进行本实例源码下载 

上一篇:JS判断上传文件的类型
下一篇:磁盘碎片整理有什么用?Win7磁盘清理的方法

相关文章