觸發在JavaScript中的iframe中的文件輸入使用javascript

我正試圖解決公司的Web框架中醜陋的瀏覽器特定上傳按鈕。觸發在JavaScript中的iframe中的文件輸入使用javascript

我創建的是一個帶有窗體的隱藏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」屬性添加到輸入元素時，它會被Chrome的「click（）」事件觸發。

爲什麼Chrome在iframe中的輸入上調用「click（）」時未打開文件選擇器對話框？

來源

2012-09-25 Vincentz

看來我們的問題是由於我們沒有從單擊事件調用我們的「clicky（）」方法，而是來自於單獨的瀏覽器事件。它並沒有在這個例子中顯示，但我們的實際應用程序代碼不是在這裏複製和粘貼的選項。 – Vincentz

我有同樣的問題。 :(你能提供一個關於如何修復它的提示嗎？ –

Chrome會將每個文件路徑視爲不同的來源。當我在服務器上託管您的示例時，它在Chrome中正常工作。您也可以使用「--allow-file-access-from-files」作爲參數來啓動Chrome，以繞過此security measure。

來源

2012-09-25 16:30:40 lvanberkel

如果你安裝了Python，python -m SimpleHTTPServer是解決這個問題的好選擇。 –

觸發在JavaScript中的iframe中的文件輸入使用javascript

回答

相關問題