使用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，以規避此安全措施 。