关于input的file 控件及美化

在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用input的file控件来实现就好啦~

1. !doctyPE html>     
2. html lang="en">     
3. head>     
4.   meta charset="UTF-8">     
5.   tITle> Document/title>     
6.   style> /style>     
7. /head>     
8. body>     
9. 　　input type="file" value="选择文件" />     
10. /body>     
11. /html>     

效果图是酱婶的：

注意！别以为这个是由一个text和一个button组合成的，其实它就是一个file控件哦

今天工作中遇到要求：不显示“未选择任何文件”，捣鼓够一个小时，发现设置它的width值就搞定了：

代码： input type="file" value="选择文件" />

width值设置为70px刚刚好，如下图：

【美化】

思路：

外面的一层div是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（即使file控件不可见）

1. !doctype html>   
2. html lang="en">   
3. head>   
4.   meta charset="UTF-8">   
5.   title> Document/title>   
6.   style>   
7.     .file-box{  position:relative; width:340px}     
8.     .txt{  height:22px;  border:1px solid #cdcdcd;  width:180px; }     
9.     .BTn{  background-color:#FFF;  border:1px solid #CDCDCD; height:24px;  width:70px; }     
10.     .file{  position:absolute;  top:0;  right:80px;  height:24px;  opacity:0; width:260px;  }     
11.   /style>   
12. /head>   
13. body>   
14.     br> br>   
15.     div class="file-box">     
16.         form action="" method="post" enctype="multipart/form-data">     
17.         input type='text' name='textfield' id='textfield' class='txt' />     
18.         input type='button' class='btn' value='浏览' />     
19.         input type="file" name="fileField" class="file" id="fileField" size="28"/>     
20.     /form>     
21.     /div>     
22. /body>   
23. /html>   

效果：

以上这篇关于input的file 控件及美化就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！