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)