3

我正在尝试解决我公司的 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，以便我可以单独提交它。

删除“显示：无”没有效果。当“onclick”属性添加到输入元素时，它会被 Chrome 的“click()”事件触发。

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

4

1 回答 1

1

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

于 2012-09-25T16:30:40.443 回答