input: file 控件设置

在使用<input type="file" >  这个控件的时候，会发现在ie,firefox,chrome下表现的都不一致。而且不可以设置它的width。

基于上面的原因，我们只能自己加工一下这个上传控件了，并且各个浏览器兼容。

HTML： 建立一个透明的file控件，让后将这个file控件定位到页面上上传的botton上面。

[html]  view plain copy

1. <input id="txt_autorssfeed" type="text" /><input type="button" value="Upload" id="sub_autoupload" />  
2.                            <input type="file" id="sub_hidefileupload" class="file"  

CSS： 设置透明度和相对定位我们的file控件

[css]  view plain copy

1. #sub_autoupload  
2. {  
3.     padding: 0;  
4.     height: 34px;  
5.     width: 15%;  
6.     margin-left: 8px;  
7.     cursor: pointer;  
8.     vertical-align: middle;  
9. }  
10. .sub_middle .file{    
11.     height: 34px;  
12.     width: 78px;  
13.     position:absolute ;    
14.     filter: alpha(opacity = 0);    
15.     -moz-opacity:0;    
16.     opacity: 0;    
17.     z-index: 110;    
18.     cursor: pointer;  
19.     float: right;  
20.     margin-top: -32px;  
21.     position: relative;  
22. }    

js： file 的onchange事件发生后，将取得文件路径放入我们自定义的文本框

[javascript]  view plain copy

1. $("#sub_hidefileupload").change(function () {  
2.     $("#txt_autorssfeed").val($(this).val());  
3. });  

这样，一个可以设置宽度和高度的 file控件就模拟出来了。当然，这里没有考虑ie6。