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

Question

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

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

单击将打开IE和FF中的文件选择对话框，但不会在Chrome中打开。 在javascript函数中从iframe中调用“click（）”对Chrome无效。

一些示例代码：

fileuploadtest.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>

fileupload.html：

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

通过删除iframe并在第一页中放置表单，Chrome会按照我的意愿打开文件选择器对话框。 但是，我必须在我们的Web应用程序中使用iframe，以便我可以单独提交。

删除“display：none”无效。 当“onclick”属性添加到input元素时，它会被Chrome的“click（）”事件触发。

为什么Chrome在iframe中的输入上调用“click（）”时无法打开文件选择器对话框？

Answer 1

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