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

最新推荐文章于 2020-08-07 19:52:11 发布

原创最新推荐文章于 2020-08-07 19:52:11 发布 · 6.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #input #file #class #firefox #chrome

本文介绍如何在不支持onClick事件的input type=file元素中，利用CSS技巧实现模拟点击事件的功能，适用于Firefox、IE及Google Chrome等浏览器。

方法一：

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>