0

我有一个页面（演示）：

    <!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：文件输入将被隐藏，因此用户只能使用假按钮。

4

4 回答 4

3

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

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

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

于 2013-09-18T14:33:05.770 回答
1

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

[...]
于 2013-09-18T15:01:17.477 回答
0

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

例如，如何为 HTML 中的文件输入设置值？，你不希望这种情况发生

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:\passwords.txt">
</form>
<script>document.foo.submit();</script>
于 2013-09-18T14:49:17.707 回答
0

与输入文件元素一起添加标签标签。将标签的“for”属性设置为输入文件元素的 id。

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

然后简单地为标签设置您喜欢的样式。尝试过各种IE版本。

于 2015-07-29T20:10:47.003 回答