2011
Jan
12
因為瀏覽器安全性的因素，使得網頁無法直接用 Javascript 呼叫 "檔案上傳 input"，執行瀏覽檔案的動作，所以必須做假的按鈕來營造瀏覽的假象，實際上，使用者還是點到正常的檔案上傳 input，下例開始介紹「假按鈕」 !!。
※測試過可以執行的瀏覽器有：IE 6, IE 7, IE 8 Firefox 3 ,Chrome ,Opera
先看看範例把，網頁檔案上傳按鈕範例如下：
按鈕製作說明：
- 在底圖放上事先做好的按鈕圖片與假的input。
- 放真的在底圖上面，並設定為完全透明。
語法為： IE:filter:alpha(opacity=0); , 其它:opacity:0; - 定位方式：可以使用absolute,relative,margin..等，本範例採用margin來將真的input定位至假的input上方。
- 若設定為半透明，就可以明顯的看出製作方式如下。
- 最後加上script語法，將選取到的檔案名稱，回傳給假的input。
網頁原始碼 CSS：
Example
- <style>
- .cover_div{
- float:left;
- width:270px;
- }
- .fake_input{
- float:left;
- width:135px;
- margin:0 5px 0 0;
- }
- .fake_image{
- background:url(add_date.jpg);
- width:74px;
- height:21px;
- display:block;
- float:left;
- text-align:center;
- color:white;
- text-decoration:none;
- font-size:12px;
- padding:3px 0 0 0;
- color:white !important;
- }
- .hide_input{
- border:1px solid red;
- margin:0px 0 0 -267px;
- margin:0px 0 0 -267px9;
- float:left;
- height:30px;
- opacity:0;
- filter:alpha(opacity=0);
- width:220px9;
- }
- .clear{
- clear:both;
- }
- </style>
網頁原始碼 Javascript：
Example
- function setText(ob,name){
- document.getElementById(name).value=ob.value;;
- }
網頁原始碼 html：
Example
- <div class="cover_div">
- <input id="fileName" class="fake_input" type="text"><a href="" class="fake_image">點我</a>
- <div class="clear"></div>
- </div>
回應 (Leave a comment)