2011
Jan
12

CSS 自訂 input file 檔案上傳按鈕

Tags:
簡中版

網頁好讀版

因為瀏覽器安全性的因素，使得網頁無法直接用 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 
  1. <style>  
  2.    
  3.     .cover_div{  
  4.         float:left;  
  5.         width:270px;  
  6.     }  
  7.     .fake_input{  
  8.         float:left;  
  9.         width:135px;  
  10.         margin:0 5px 0 0;  
  11.     }  
  12.     .fake_image{  
  13.         background:url(add_date.jpg);  
  14.         width:74px;  
  15.         height:21px;  
  16.         display:block;  
  17.         float:left;  
  18.         text-align:center;  
  19.         color:white;  
  20.         text-decoration:none;  
  21.         font-size:12px;  
  22.         padding:3px 0 0 0;  
  23.         color:white !important;  
  24.     }  
  25.     .hide_input{  
  26.         border:1px solid red;  
  27.         margin:0px 0 0 -267px;  
  28.         margin:0px 0 0 -267px9;  
  29.         float:left;  
  30.         height:30px;  
  31.         opacity:0;  
  32.         filter:alpha(opacity=0);  
  33.         width:220px9;  
  34.     }  
  35.    
  36.        
  37.     .clear{  
  38.         clear:both;  
  39.     }  
  40. </style>

網頁原始碼 Javascript：

Example 
  1. function setText(ob,name){  
  2.     document.getElementById(name).value=ob.value;;  
  3. }  
  4.  

網頁原始碼 html：

Example 
  1. <div class="cover_div">  
  2.         <input id="fileName" class="fake_input" type="text"><a href="" class="fake_image">點我</a>  
  3.         <div class="clear"></div>  
  4. </div>  
  5.  

網頁好讀版

This post was last modified by puritys

Copyright &copy; 2014 PURITYS.COM. All rights reserved.