瀏覽器支持使用JavaScript打開文件輸入對話框

從我一直在閱讀的文件中，通過JavaScript打開<input type="file">文件瀏覽對話框在某些瀏覽器中有問題。看來Firefox和Opera在這方面遇到的問題最多。我看到的典型建議是將<input type="file">放在點擊元素的頂部，並將其不透明度設置爲0.顯然，這不是理想的解決方案。瀏覽器支持使用JavaScript打開文件輸入對話框

我有下面的代碼：

<div style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0;"> 
    <input type="file" id="fileInput" name="files[]" multiple="multiple" /> 
</div> 
<input type="button" value="Open" onclick="$('#fileInput').trigger('click')" />

我在IE8，Chrome瀏覽器（新版本）和Firefox（新版本）測試此。在所有這些代碼工作正常。

我在想，有沒有人知道這個代碼會遇到哪些問題？我想支持IE8 +以及所有相對較新版本的Chrome，Firefox和Opera。

來源

2013-08-03 Gavin

爲什麼不試試？一般來說，觸發點擊文件輸入始終是一件棘手的事情，因爲這是一個安全問題 - 誘騙用戶上傳文件的網站是瀏覽器安全性最糟糕的噩夢之一。你爲什麼想要這樣做呢？你想改進元素的設計嗎？我認爲那裏有試用和測試的方法（其中一些應該附帶所需的兼容性信息） –

我不確定你的意思。我已經在4種不同的瀏覽器中嘗試過了（我只是在Safari中嘗試過，並且工作正常）。由於每個主流瀏覽器現在都支持這個功能，所以它不能成爲一個重要的安全問題。我無法安裝每個瀏覽器的每個以前的版本，以查看是否有問題，這就是爲什麼我詢問是否有人知道哪些舊版瀏覽器可能存在問題。如果有人能指出我的瀏覽器版本可能有問題，我可以下載該瀏覽器並進行測試。 – Gavin

是可能的相容性通過以下步驟：

上載HTML文件和jQuery（在這種情況下壓縮，生產的jQuery 1.10.2）到遠程服務器。
使用this在線服務來模擬不同版本的瀏覽器。

結果

IE 6，7和8：行
FIREFOX 3，3.6：FAILED
FIREFOX 4和更高：OK
SAFARI 4和更高： OK
CHROME 14及更高版本：好的
OPERA 11和11.5：失敗
OPERA 11.6及更高版本：OK

來源

2013-08-03 10:01:26 mdoust

非常有幫助。再次感謝。 – Gavin

我剛剛在Chrome 28和Firefox 22中檢查了你的代碼，它工作正常;

但是我無法在IE 8上檢查它（可能是我的瀏覽器有問題）。

此方法還有其他選擇。您可以將您的輸入，無論你想和剛剛成立的CSS顯示屬性設置爲無：

<input type="file" id="fileInput" name="files[]" multiple="multiple" style="display: none;" />

你試過嗎？

來源

2013-08-03 08:36:32 mdoust

感謝您的評論我讀過的是將輸入設置爲'display：none'不會讓您在Chrome和Safari中發起onclick事件。我認爲我原來的帖子有點被誤解（可能是我的錯）。我已經在IE8，Chrome，Safari和Firefox中進行過測試，但是我已經閱讀過一些瀏覽器在早期版本中遇到的問題。我只是不確定哪些版本有問題，因爲它在我的所有瀏覽器中都能正常工作。 – Gavin

我不確定safari是什麼，但是這對Chrome，Firefox和IE 8來說工作正常。至於檢查舊版本，如果我有更多信息，我會回覆你。 – mdoust

謝謝。這就是我在這裏問的原因。看起來關於什麼是允許的以及什麼不與文件輸入有關的所有信息都非常過時。它在我的所有瀏覽器中運行良好，但不幸的是，普通大衆喜歡使用過時的軟件。 – Gavin

< ------編輯：此方法不工作，但想到我會離開這裏的情況下，有些人認爲它可能工作---- --->

您可以使用setTimeout來檢測文件瀏覽器是否作爲後備打開。如果沒有打開顯示實際的文件輸入。

如果您添加一個50毫秒的setTimeout，然後檢查實際訪問所用的時間量是否超時。如果這小於100毫秒，則文件瀏覽器不會打開並阻止JavaScript。如果運行時間更長，則必須打開。

來源

2014-07-28 07:10:00 georgephillips

http://jsfiddle.net/F5Uns/3/如果有人想嘗試它不工作 – georgephillips

瀏覽器支持使用JavaScript打開文件輸入對話框

回答

相關問題