使用透明效果來自定義文件上傳按鈕控件樣式
更新時間:2012年12月13日 15:56:53 作者:
處于安全上的考慮,input[type="file"] 的文件選擇按鈕樣式并不能隨意修改(不過可以修改input 的透明度),可能會跟設(shè)計師的設(shè)計格格不入,這時可以使用透明效果來自定義上傳按鈕
[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>
相關(guān)文章
JavaScript使用setTimeout實現(xiàn)倒計時效果
這篇文章主要為大家詳細介紹了JavaScript使用setTimeout實現(xiàn)倒計時效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-02-02js 按照指定間隔 向字符串中插入隨機字符串的實現(xiàn)代碼
看到論壇有人問,覺得有意思,就試著寫了一下。2010-03-03layui+ssm實現(xiàn)數(shù)據(jù)批量刪除功能
本篇文章給大家介紹layui+ssm實現(xiàn)數(shù)據(jù)批量刪除功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12Array, Array Constructor, for in loop, typeof, instanceOf
雖然在 JavaScript 中數(shù)組是是對象,但是沒有好的理由去使用 `for in` 循環(huán) 遍歷數(shù)組。相反,有一些好的理由不去使用 for in 遍歷數(shù)組。2011-09-09