2

根据我一直在阅读的内容，<input type="file">通过 JavaScript 打开文件浏览对话框在某些浏览器中存在问题。似乎 Firefox 和 Opera 在这方面的问题最多。我见过的典型建议是将其<input type="file">放在 click 元素的顶部并将其不透明度设置为 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 版本。

4

3 回答 3

3

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

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

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

结果

  • IE 6、7 和 8：好的
  • 火狐 3、3.6：失败
  • Firefox 4 及更高版本：好的
  • SAFARI 4 及更高版本：好的
  • CHROME 14 及更高版本：好的
  • 歌剧 11 和 11.5：失败
  • OPERA 11.6 及更高版本：好的
于 2013-08-03T10:01:26.483 回答
0

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

但是我无法在 IE 8 上检查它（也许我的浏览器有问题）。

这种方法有一个替代方法。您可以将输入放置在任何您想要的地方，只需将 css 显示属性设置为无：

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

你试过这个吗？

于 2013-08-03T08:36:32.050 回答
0

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

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

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

于 2014-07-28T07:10:00.883 回答