將自定義檔案上傳按鈕的樣式
阿新 • • 發佈:2019-02-16
的分享,
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 視窗)。
根據自己的需求,下面是改動過的:
<style> #ui-upload-holder{ position:relative;width:60px;height:18px;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:18px;text-align:center;} #ui-upload-filepath{ position:relative; border:1px solid silver; width:120px; height:18px; overflow:hidden; float:left;} #ui-upload-filepathtxt{ position:absolute; top:0px;left:0px; width:100%;height:18px; border:0px; line-height:18px; } .uploadlay{margin:200px; border:1px green solid; width:120px; height:18px; padding:10px;} </style> <div> <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" >Browse...</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>
可以根據自己的需要的不同樣式進行修改。效果: