在使用<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。