Question

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

我有以下代码：

<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（较新版本）中对此进行了测试。在所有这些代码中，这段代码运行良好。

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

Answer 1

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

将html文件和jQuery（在本例中为压缩，生产jQuery 1.10.2）上传到远程服务器。
使用this在线服务模拟不同版本的浏览器。

结果

IE 6,7和8：好的
FIREFOX 3,3.6：FAILED
FIREFOX 4及更高版本：好的
SAFARI 4及更高版本：好的
CHROME 14及以后：好的
OPERA 11和11.5：FAILED
OPERA 11.6及更高版本：好的

Answer 2

我刚刚在chrome 28和Firefox 22中检查了你的代码，它运行良好;

但是我无法在IE 8上检查它（可能是我的浏览器出了问题）。

这种方法有另一种选择。您可以将输入放在任何位置，只需将css display属性设置为none：

 <input type="file" id="fileInput" name="files[]" multiple="multiple" style="display: none;" />

你试过这个吗？

Answer 3

＆lt; ------编辑：这种方法不起作用，但我想我可以把它留在这里以防其他人认为它可能有用-------＆gt;

您可以使用setTimeout来检测文件浏览器是否作为后备打开。如果未打开则显示实际文件输入。

如果添加50毫秒的setTimeout，然后检查实际访问所花费的时间，则运行超时。如果这小于100毫秒，则文件浏览器无法打开并阻止javascript。如果它运行的时间更长，它必须已经打开。

浏览器支持使用JavaScript打开FILE输入对话框

3 个答案: