使用透明度自定義文件上傳控件樣式

2024-07-11 08:23:02

字體：大中小

來源：轉載

供稿：網友

<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>

1、在比較舊的瀏覽器中(比如IE9及以下，不支持 fileAPI,不支持 XMLHttprequest level2 只能用表單post文件)上傳圖片時，只能使用表單 post，處于安全上的考慮，input[type="file"] 的文件選擇按鈕樣式并不能隨意修改(不過可以修改input 的透明度)，可能會跟設計師的設計格格不入，這時可以使用透明效果來自定義上傳按鈕。

2、控件寬度最好不要超過60px，因為file控件瀏覽按鈕的寬度無法修改，在firefox下約為60px。如果超出60px，不要設置控件的鼠標樣式，由于firefox下file控件的鼠標樣式只在瀏覽按鈕上生效，如果設置鼠標樣式會造成控件左邊和右邊樣式不一致。

3、控件文字顯示層的行高與控件容器層的高度保持一致以保證文字垂直居中。

4、由于安全性問題，文件上傳控件必須使用鼠標點擊瀏覽按鈕彈出文件選擇窗并選擇文件，才能向服務器上傳文件(不支持 file API )，通過js觸發file控件的click() 事件來彈出文件選擇窗然后選擇文件的方式是無法上傳文件的，因此必須使file控件覆蓋在文字顯示層上面，將file控件樣式設置為透明來顯示下面的文字層。

5、xmlhttprequest組件(level1 , level 2已經支持二進制數據上傳和跨域)是無法上傳文件的，異步上傳文件需要使用 iframe 引入上傳控件使用表單 post 數據，可以把文件上傳功能單獨放在iframe內實現，也可以僅僅把處理圖片上傳的服務器腳本指定在iframe內打開 (設置form表單的 target 指向 iframe 窗口)。

<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>

上一篇：CSS選擇器大全

下一篇：CSS:360+HTML代碼