学步园

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

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

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

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

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

#sub_autoupload
{
    padding: 0;
    height: 34px;
    width: 15%;
    margin-left: 8px;
    cursor: pointer;
    vertical-align: middle;
}
.sub_middle .file{  
    height: 34px;
    width: 78px;
    position:absolute ;  
    filter: alpha(opacity = 0);  
    -moz-opacity:0;  
    opacity: 0;  
    z-index: 110;  
    cursor: pointer;
    float: right;
    margin-top: -32px;
    position: relative;
}  

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

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

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