Question

我有一个页面（demo）：

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#id_button").click(function(e) {
                    $("#id_file").click();
                });
            });
        </script>
    </head>
    <body>
        <form method="post" enctype="multipart/form-data" action="http://www.google.com/">
            <input type="file" name="file" id="id_file" />
            <input type="button" id="id_button" value="fake button" />
            <input type="submit">
        </form>
    </body>

</html>

如果我点击“假按钮”打开浏览对话框，选择文件（我在input[type="file"]中看到），然后点击提交按钮，没有发布帖子，input[type="file"]被清除。

我应该改变什么才能让它发挥作用？

我在IE8和IE10中遇到了这个问题。

PS：文件输入将被隐藏，因此用户只能使用假按钮。

Answer 1

所有浏览器都有不同的行为，因为它们允许您从javascript中执行以编程方式单击文件输入的输入按钮。

我发现似乎跨浏览器工作的最佳解决方案是将不透明度设置为0（不要使用display：none）并将按钮放在输入下方，这样用户点击按钮的0不透明度输入，从而触发输入选择对话框。

可以在此处找到关于样式文件输入的好文章：http://www.quirksmode.org/dom/inputfile.html

Answer 2

http://jsfiddle.net/j38Wj在Google Chrome中运行良好，但在IE 10中无效。我认为IE不允许通过外部“点击”事件选择文件。只有一种“自定义”输入[type = file]的方法是使用不透明度样式来隐藏它以及它下面的自定义按钮控件的相对位置。工作示例：http://blueimp.github.io/jQuery-File-Upload/

[...]

Answer 3

我认为出于安全原因，所有浏览器都会执行此操作。提交表单时，您将被重定向到其他页面（或同一页面），如果您被定向到同一页面，则会重新初始化该表单。在这种情况下，出于安全原因，您根本无法设置文件的值。

从示例How to set a value to a file input in HTML?开始，您不希望发生这种情况

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:\passwords.txt">
</form>
<script>document.foo.submit();</script>

Answer 4

添加标签标签和输入文件元素。将标签的'for'属性设置为输入文件元素的id。

然后当您单击标签时，输入文件元素将“单击”，文件对话框将打开。

然后根据您的喜好设计标签样式。尝试了各种IE版本。

IE在提交时清除输入[type =“file”]

4 个答案: