使用透明效果來自訂檔上傳按鈕控制項樣式_javascript技巧

<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> <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>
[Ctrl A 全選注:如需引入外部Js需刷新才能執行

]

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 視窗)。

複製程式碼

程式碼如下:<script> document.getElementById("ui-upload-input").onchange=function(){ document.getElementById("ui-upload-filepathtxt").value = this.value; } </script>

上傳....標題>

#ui-upload-holder{ 位置：相對；寬度：60px；高度：35px；邊框：1px 純銀；溢出：隱藏；}
# ui-upload-input{ 位置：絕對；頂部：0px；右側：0px；高度：100%；遊標：指標；不透明度：0；過濾器：alpha（不透明度：0）；z-index：999； }
#ui-upload-txt{ 位置：絕對；上：0px；左側：0px；寬度：100%；高度：100 %;line-height:35px;text-align:center;}
#ui-upload-filepath{ 位置:relative;邊框：1px純銀；寬度：150px；高度：35px；溢出：隱藏；浮動：左；}
#ui-upload-filepathtxt{ 位置：絕對；頂部： 0px；左側：0px；寬度：100%；高度：35px；邊框：0px；行高：35px;
.uploadlay{margin:200px;邊框：1px 綠色實心；寬度：300px；高度：200px；內200px；內邊距：10px; }
樣式>
頭>

;

上傳

>

document.getElementById("ui-upload-input").onchange=function(){
document.getElementById("ui- upload-filepathtxt").value = this.value;
}
腳本>
身體>