浏览器支持使用JavaScript打开FILE输入对话框 [英] Browser support for opening FILE input dialog with JavaScript

问题描述

根据我一直在阅读的内容，通过JavaScript打开< input type =file> 文件浏览对话框在某些浏览器中存在问题。似乎Firefox和Opera在这方面遇到的问题最多。我看到的典型建议是将< input type =file> 置于点击元素之上，并将其不透明度设置为0.显然，这是不是一个理想的解决方案。

From what I've been reading, opening a <input type="file"> file browse dialog through JavaScript has issues in some browsers. It appears that Firefox and Opera have the most problems with this. The typical recommendation I've seen is to put the <input type="file"> on top of your click element and set it's opacity to 0. Obviously that is not an ideal solution.

我有以下代码：

<div style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0;">
    <input type="file" id="fileInput" name="files[]" multiple="multiple" />
</div>
<input type="button" value="Open" onclick="$('#fileInput').trigger('click')" />

我在IE8，Chrome（较新版本）和Firefox（较新版本）中对此进行了测试。在所有这些代码中，这段代码运行正常。

I've tested this in IE8, Chrome (newer version), and Firefox (newer version). In all of these this code works fine.

我想知道，有没有人知道这些代码会出现问题的浏览器？我想支持IE8 +和所有相对较新版本的Chrome，Firefox和Opera。

I'm wondering, does anybody know which browsers this code will have problems with? I want to support IE8+ and all of the relatively newer versions of Chrome, Firefox, and Opera.

推荐答案

有可能通过以下步骤实现兼容性：

It is possible to the compatibility by following these steps:

1. 上传html文件和jQuery（在本例中为压缩，生产jQuery 1.10.2）远程服务器。

1. Uploading the html file and jQuery (in this case compressed, production jQuery 1.10.2) to a remote server.

使用这个在线服务，以模拟不同版本的浏览器。

Using this online service to emulate different version of browsers.

结果

• IE 6,7和8：好的


• FIREFOX 3,3.6：FAILED


• FIREFOX 4及更高版本：确定


• SAFARI 4及更高版本：确定


• CHROME 14及更高版本：确定


• OPERA 11和11.5：FAILED


• OPERA 11.6及更高版本：确定

• IE 6, 7 and 8: OK
• FIREFOX 3, 3.6: FAILED
• FIREFOX 4 and later: OK
• SAFARI 4 and later: OK
• CHROME 14 and later: OK
• OPERA 11 and 11.5: FAILED
• OPERA 11.6 and later : OK

这篇关于浏览器支持使用JavaScript打开FILE输入对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！