快捷導(dǎo)航

使用透明效果來(lái)自定義文件上傳按鈕控件樣式

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

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

<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="wppm3vysvbp"   class="uploadlay"> <div   class="wppm3vysvbp"   id="ui-upload-filepath"> <input type="text" id="ui-upload-filepathtxt" class="filepathtxt"> </div> <div   class="wppm3vysvbp"   id="ui-upload-holder"> <div   class="wppm3vysvbp"   id="ui-upload-txt">上傳</div> <input type="file" id="ui-upload-input" name="myfile"> </div> </div>  </body>

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

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