<input type="file"/>的问题

如何实现点击一张图片实现<input type="file"/>的功能?

解决方案 »

  1.   


     <script type="text/javascript">
         function openFile() {
             document.getElementById("file1").click();
         }
    </script>
    <input type="file" id="file1"/>
    <input type="button" value="open file" onclick="openFile()"/>把上面的Button换成图片就可以了。
      

  2.   

    4楼的方法也可以。
     －－－－
    另外有一种方法是用css来实现。
    原理就是：
     将input file的z-index设得比图片高，这样，它将覆盖在这张图片上。
     然后，通过css将图片定位到这个input file 的正下方。
     这样就能实现点击图片，相当于点击input file的效果。
     最后，将input file的透明度设为0即可。
    如下代码：
       
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <style type="text/css">
        #upload{position:absolute;overflow:hidden;}
    #file{position:absolute;z-index:100;opacity:0;filter:alpha(opacity=0);font-size:60px;margin-top:-5px;margin-left:-700px;cursor:pointer;}
      </style>
     </head> <body>   <span id="upload">
         <input type="file" id="file" name="file" />
     <a href="javascript:void(0)">上传图片</a>
       </span>
     </body>
    </html>
      

  3.   

    5楼介绍的很详细，看看网易，开心网的实现方式，你就明白了！隐藏了input，将图片盖在它身上。障眼法！
      

  4.   

    使用滤镜兼容性不是很好，如果要隐藏file控件的话，设置啊的display为none，然后使用js自定义需要上传的文件的显示，这个在多文件上传的时候会用到。