Question

可能重复：
In JavaScript can I make a “click” event fire programmatically for a file input element?

我有一个看起来像这样的网页

<html>
    <head>
        <title>File Upload Click Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
        <input type="file"></input>
    </body>
</html>

我的目标是让 div 在文件输入上引发点击事件，这似乎与我在IE和Chrome中所期望的完全一样，但是在Firefox中不起作用（单击 div 时没有打开文件浏览器。）

有没有办法让它在FF中运行？

Answer 1

有没有办法让它在FF中运行？

不，它在IE的大多数常见版本中也不起作用。 IE将打开对话框，但是一旦你选择了一个文件，表单就不会真正提交。

放弃希望。伪造文件上传框的唯一方法是使用透明技术，这根本不推荐，因为浏览器可能在内部以不同方式布置文件上传框（甚至提供不包含浏览对话框的文件上传控件），很有可能你最终会以不可操作的形式出现。

了解喜欢灰色文件上传字段，或使用渐进式增强功能将其替换为可用的Flash。

Answer 2

这是解决方法（FF）。 HTML位：

<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />

输入文件类型的CSS：

.file-upload { display:none; }

jQuery位：

//bind click
$('#btn-logo').click(function(event) {
  $('#logo').click();
});

//capture selected filename
$('#logo').change(function(click) {
  $('#text-logo').val(this.value);
});

表单提交后，隐藏的输入文件将上传文件。希望这会有所帮助：）

jQuery：模拟点击<input type =“file”/>在Firefox中不起作用？

2 个答案: