jQuery：在Firefox中模拟点击<input type="file" />无效？

Question

jQuery：在Firefox中模拟点击<input type="file" />无效？

30

可能是重复问题：
在 JavaScript 中，我能否以编程方式使文件输入元素的“点击”事件自动触发？

我有一个长这样的网页

<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 在点击时触发 file input，在IE和Chrome中似乎完美地实现了这一点，但在Firefox中无法工作（当你点击 div 时没有文件浏览器被打开）。

有没有办法让它在Firefox中工作？

- kristian

1

它将在FF4中推出：https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method - Roatin Marth

阅读了您的问题和给出的答案，不幸的是他们所说的似乎是正确的。我找到了一些其他的文章，可能有助于解决这个问题。请查看它们。你会解决这个问题的...！> 01. https://dev59.com/d3VC5IYBdhLWcg3wsTbv

https://dev59.com/e3I-5IYBdhLWcg3wBjnk

- Dilhan Maduranga

今天早上我测试了脚本，在Firefox 4中运行良好。 Firefox 4允许在文件输入上进行单击事件。 - kriom

请参考这个答案 https://dev59.com/d3VC5IYBdhLWcg3wsTbv#3030174 它也在FF中有效。 - TheVillageIdiot

2个回答

22

以下是解决方法 (针对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);
});

在表单提交时，隐藏的文件输入框会上传文件。希望这有所帮助 :)

- Design Kanya

你试过这段代码吗？如果那么容易，提问者为什么还会来这里呢？我为什么会在这里呢？据我所知，你无法设置文件输入的值。而且显然你也无法触发它们的事件。可能是出于安全原因。 - Stoutie

2

我收回之前的话，看起来确实很简单。但是在控制台中尝试时无法工作。当我将代码放入我的文档中时，它似乎可以正常工作。 - Stoutie

1

+1 这个完美运行，只是在控制台中不行！奇怪，我猜这是出于安全目的。 - ksloan

1

这个很容易实现！我认为混淆在于控制台没有反映出同样的结果。顺便说一下，给你加1分 :) - Rubyrider

我正在尝试这个。表单被提交，但从未弹出选择文件对话框。而且请求中也没有文件。怎么回事？ - sureshvv

1

这是一个关于此代码的 jsfiddle。 - philfreo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

有办法在FF中使其工作吗？

不行，而且它在大多数常用版本的IE中也不能工作。IE会打开对话框，但是一旦你使用它选择了一个文件后，表单实际上不会提交。

放弃希望吧。唯一可以模拟文件上传框的方法是使用透明度技术，但这真的不推荐，因为浏览器可能会在内部以不同的方式布局文件上传框（甚至提供不包括“浏览”对话框的文件上传控件），这样高度可能就会出现无法操作的表单。

学会喜欢灰色文件上传框，或者在可用时使用渐进增强来将其替换为Flash。