使用 javascript 在 Chrome 中的 iframe 中触发文件输入答案

【问题标题】：triggering file input within an iframe in Chrome with javascript使用 javascript 在 Chrome 中的 iframe 中触发文件输入
【发布时间】：2012-09-25 15:10:03
【问题描述】：

我正在尝试解决我公司 Web 框架中丑陋的浏览器特定的上传按钮。

我创建的是一个隐藏的 iframe，其中包含一个表单。 iframe 之外是一个“选择文件”按钮。该按钮从 iframe 中检索输入元素并在其上调用“click()”。

点击会在 IE 和 FF 中打开文件选择对话框，但在 Chrome 中不会。在 javascript 函数中从 iframe 中调用“click()”对于 Chrome 也不起作用。

一些示例代码：

文件上传测试.html：

<div id="button" style="background-color:red; height:50px; width:200px;" onclick="clicky()">Browse files</div>
<iframe id="frame" src="fileupload.html" style="display:none"></iframe>

<script type="text/javascript">
    function clicky() {
        var iframe = document.getElementById("frame");
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        innerDoc.getElementById("input").click();
    };   
</script>

文件上传.html：

<form>
    <div><input type="file" id="input" multiple/></div>
</form>

通过消除 iframe 并将表单放在第一页中，Chrome 会像我想要的那样打开文件选择器对话框。但是，我必须在我们的 Web 应用程序中使用 iframe，以便我可以单独提交它。

删除“display: none”没有效果。当向 input 元素添加“onclick”属性时，它会被 Chrome 的“click()”事件触发。

为什么在 iframe 中对输入调用“click()”时 Chrome 不打开文件选择器对话框？

【问题讨论】：

看来我们的问题是由于我们没有从点击事件中调用“clicky()”方法，而是从单独的浏览器事件中调用。它没有在这个例子中显示，但我们的实际应用程序代码不能直接复制粘贴到这里。
我也有同样的问题。 :(你能提示一下如何解决它吗？

标签： javascript html google-chrome file-upload

【解决方案1】：

Chrome 将每个文件路径视为不同的来源。当我在服务器中托管您的示例时，它在 Chrome 中运行良好。您还可以使用“--allow-file-access-from-files”作为参数启动 Chrome 以规避此 security measure。

【讨论】：

如果您安装了 Python，python -m SimpleHTTPServer 是解决此问题的不错选择。