由于file類型的表單會自動生成一個文字為瀏覽..的按鈕,并且這個按鈕的文字不能改變,如果我想改變這個file input框的表現(xiàn)形式或者希望改變這個按鈕的文字應該怎么辦呢?
我首先想到的,也是最簡單的方式就是把這個file input框隱藏,然后建多一個按鈕,點擊按鈕的時候觸動file 的click事件,這個方式再ie下可以,在火狐下就沒效果。
另外幾種種比較常用的方式就可以解決瀏覽器兼容的問題,下面這種算是比較完美的解決方式,也是最簡單的了。
就是先把這個file框透明,然后把它放在a標簽里面,定義a標簽的背景樣式,這樣看到的是a,點擊的是file,下面是代碼:
<HTML>
<HEAD>
<TITLE>upload</TITLE>
<style>
.a {
cursor:hand;
text-decoration:none;
background-image: url('http://cn.madeinasia.com/templets/default/images/logo.gif');
height:20px;
width:20px;
padding:0px;
}
.file {
cursor:pointer;
font-size:20px;
left:0px;
opacity:0;
filter:alpha(opacity=0)
}
</style>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="" enctype="multipart/form-data">
<A class='a' href=#><INPUT class='file' type=file size=1 name="filedata" onchange="this.form.submit()"></A>
<INPUT TYPE="submit" value="提交">
</FORM>
</BODY>
</HTML>