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

回應 (Leave a comment)