点击超链接弹出一个上传文件的窗口

最新推荐文章于 2022-03-16 15:54:43 发布

lmzpp

最新推荐文章于 2022-03-16 15:54:43 发布

阅读量6.8k

点赞数

文章标签： javascript input file class firefox chrome

本文链接：https://blog.csdn.net/lmzpp/article/details/5875824

版权

方法一：

W3C处于安全性考虑，并没有为type为file的input空间指定onclick事件(IE不怎么按W3C标准办事儿)。
但是我们可以通过CSS技术来模拟这个功能，前提是你的浏览器支持半透明效果(opacity)
以下是给你的示例（Firefox, IE和Google Chrome下测试均通过）：

HTML code

   
   
    
    

    
    <
    
    style
    
    >
    
    
div.fileinputs 
    
    {
    
    
    position
    
    :
    
     relative
    
    ;
    
    
    overflow
    
    :
    
     hidden
    
    ;
    
    
    width
    
    :
    
     70px
    
    ;
    
    /*
    
     this width should be changed 
    
    */
    
    

    
    }
    
    

div.fakefile 
    
    {
    
    
    position
    
    :
    
     absolute
    
    ;
    
    
    top
    
    :
    
     0px
    
    ;
    
    
    left
    
    :
    
     0px
    
    ;
    
    
    z-index
    
    :
    
     1
    
    ;
    
    

    
    }
    
    

input.file 
    
    {
    
    
    position
    
    :
    
     relative
    
    ;
    
    
    text-align
    
    :
    
     right
    
    ;
    
    
    left
    
    :
    
     -132px
    
    ;
    
      
    
    /*
    
     this width should be changed 
    
    */
    
    
    *left
    
    :
    
     -152px
    
    ;
    
     
    
    /*
    
     this width should be changed 
    
    */
    
    
    z-index
    
    :
    
     2
    
    ;
    
    
    -moz-opacity
    
    :
    
    0
    
    ;
    
    
    filter
    
    :
    
    alpha(opacity: 0)
    
    ;
    
    
    opacity
    
    :
    
     0
    
    ;
    
    

    
    }
    
    

    
    </
    
    style
    
    >
    
    

    
    <
    
    div 
    
    class
    
    ="fileinputs"
    
    >
    
    
    
    
    <
    
    input 
    
    type
    
    ="file"
    
     class
    
    ="file"
    
     
    
    />
    
    
    
    
    <
    
    div 
    
    class
    
    ="fakefile"
    
    >
    
    
        
    
    <
    
    a 
    
    href
    
    =""
    
     onclick
    
    ="return false;"
    
    >
    
    Click Me
    
    </>
    
    
    
    
    </
    
    div
    
    >
    
    

    
    </
    
    div
    
    >

   
   
    
    <script language="javascript">
      function sDialog() {
           var dataForm = document.forms['dataForm'];
           dataForm.uploadFile.click();
      }
</script>
<form name="dataForm" enctype="multipart/form-data">
      <input name="uploadFile" type="file" style="display:none;">
      <a href="javascript:void(sDialog());">选择文件</a>
</form>