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

Browser support for opening FILE input dialog with JavaScript

本文关键字：FILE 输入 对话框 打开 JavaScript 支持 浏览器      更新时间：2023-09-26

根据我所读到的内容，通过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版本。

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

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

  2. 使用此在线服务来模拟不同版本的浏览器。

结果

  • IE 6、7和8：好
  • FIREFOX 3，3.6：失败
  • FIREFOX 4及更高版本：好
  • SAFARI 4及更高版本：好
  • CHROME 14及更高版本：OK
  • OPERA 11和11.5：失败
  • OPERA 11.6及更高版本：正常

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

然而，我无法在IE 8上检查它（也许我的浏览器出了问题）。

有一种替代方法。你可以把你的输入放在任何你想要的地方，只需把css显示属性设置为none:

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

你试过这个吗？

<------编辑：这个方法不起作用，但我想我可以把它留在这里，以防其他人认为它可能起作用------->

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

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

相关文章：