快捷導(dǎo)航

使用透明效果來自定義文件上傳按鈕控件樣式

更新時間：2012年12月13日 15:56:53 作者：

處于安全上的考慮，input[type="file"] 的文件選擇按鈕樣式并不能隨意修改(不過可以修改input 的透明度)，可能會跟設(shè)計師的設(shè)計格格不入，這時可以使用透明效果來自定義上傳按鈕

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>upload...</title> <style> #ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;} #ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;} #ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;} #ui-upload-filepath{ position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left;} #ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px; } .uploadlay{margin:200px; border:1px green solid; width:300px; height:200px; padding:10px; } </style> </head> <body> <div   id="vvxyksv9kd"   class="uploadlay"> <div   class="vvxyksv9kd"   id="ui-upload-filepath"> <input type="text" id="ui-upload-filepathtxt" class="filepathtxt"> </div> <div   class="vvxyksv9kd"   id="ui-upload-holder"> <div   class="vvxyksv9kd"   id="ui-upload-txt">上傳</div> <input type="file" id="ui-upload-input" name="myfile"> </div> </div>  </body>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

1、在比較舊的瀏覽器中(比如IE9及以下，不支持 fileAPI,不支持 XMLHttprequest level2 只能用表單post文件)上傳圖片時，只能使用表單 post，處于安全上的考慮，input[type="file"] 的文件選擇按鈕樣式并不能隨意修改(不過可以修改input 的透明度)，可能會跟設(shè)計師的設(shè)計格格不入，這時可以使用透明效果來自定義上傳按鈕。
2、控件寬度最好不要超過60px，因為file控件瀏覽按鈕的寬度無法修改，在firefox下約為60px。如果超出60px，不要設(shè)置控件的鼠標樣式，由于firefox下file控件的鼠標樣式只在瀏覽按鈕上生效，如果設(shè)置鼠標樣式會造成控件左邊和右邊樣式不一致。
3、控件文字顯示層的行高與控件容器層的高度保持一致以保證文字垂直居中。
4、由于安全性問題，文件上傳控件必須使用鼠標點擊瀏覽按鈕彈出文件選擇窗并選擇文件，才能向服務(wù)器上傳文件(不支持 file API )，通過js觸發(fā)file控件的click() 事件來彈出文件選擇窗然后選擇文件的方式是無法上傳文件的，因此必須使file控件覆蓋在文字顯示層上面，將file控件樣式設(shè)置為透明來顯示下面的文字層。
5、xmlhttprequest組件(level1 , level 2已經(jīng)支持二進制數(shù)據(jù)上傳和跨域)是無法上傳文件的，異步上傳文件需要使用 iframe 引入上傳控件使用表單 post 數(shù)據(jù)，可以把文件上傳功能單獨放在iframe內(nèi)實現(xiàn)，也可以僅僅把處理圖片上傳的服務(wù)器腳本指定在iframe內(nèi)打開 (設(shè)置form表單的 target 指向 iframe 窗口)。

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" > 
<title>upload...</title> 
<style> 
#ui-upload-holder{ position:relative;width:60px;height:35px;border:1px solid silver; overflow:hidden;} 
#ui-upload-input{ position:absolute;top:0px;right:0px;height:100%;cursor:pointer; opacity:0;filter:alpha(opacity:0);z-index:999;} 
#ui-upload-txt{ position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;} 
#ui-upload-filepath{ position:relative; border:1px solid silver; width:150px; height:35px; overflow:hidden; float:left;} 
#ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:35px; border:0px; line-height:35px; } 
.uploadlay{margin:200px; border:1px green solid; width:300px; height:200px; padding:10px; } 
</style> 
</head> 
<body> 
<div class="uploadlay"> 
<div id="ui-upload-filepath"> 
<input type="text" id="ui-upload-filepathtxt" class="filepathtxt" /> 
</div> 
<div id="ui-upload-holder" > 
<div id="ui-upload-txt">上傳</div> 
<input type="file" id="ui-upload-input" name="myfile" /> 
</div> 
</div> 
<script> 
document.getElementById("ui-upload-input").onchange=function(){ 
document.getElementById("ui-upload-filepathtxt").value = this.value; 
} 
</script> 
</body> 
</html> 