Question

这适用于FF6和IE 7,8和9，但不适用于Chrome / Safari或Opera：

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(function() {

            $('#uploadFile').click(function(e) {
                $('#fileUploadField').click();
                e.preventDefault();
            });

        });
    </script>

    <input type="file" name="something" style="display: none" id="fileUploadField" />
    <a href="" id="uploadFile">Upload File</a>

我猜这是由于浏览器安全限制。有没有人知道任何跨浏览器解决方案来实现这一目标？

Answer 1

您无法调用隐藏元素的点击，这是一个安全限制。而不是display: none，而是使用opacity: 0。这似乎有效。

这是一个fiddle。我看到Win 7上的FF6，Win 7 / Mac OS X 10.6.8上的Chrome 13和Mac OS X 10.6.8上的Safari 5的文件选择对话框

Answer 2

即使没有“display：none”，它也无法在IE8中运行。单击提交后，IE8将删除文件输入字段中的数据，但不提交表单。请尝试以下代码作为php：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>IE8-Test</title>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript">
      $('#btn').live('click', function(){
        $('#file').click();
      })
    </script>
  </head>
  <body>
    <form action="test.php" method="POST" enctype="multipart/form-data">
      <input id="file" type="file" name="image" class="image"/>
      <div id="btn">Click me to do a js click on the input type=file button.</div>
      <input id="submit" type="submit" name="formsubmit" value="Upload"/>
    </form>
    <br/>
    <br/>
    <br/>
    <?php
      if(isset($_POST['formsubmit'])){
        echo '<div>POST-Data</div>';
        echo '<pre>';
        var_dump($_POST);
        var_dump($_FILES);
        echo '</pre>';
      }
    ?>
  </body>
</html>

单击文本链接时如何打开文件上传提示？

2 个答案: