HTML5客戶端應用程序打開文件對話框

好的，首先讓我解釋一下，我已經廣泛研究了這一點，並且完全意識到了安全隱患。這是一個使用JavaScript，Vue和純HTML5的客戶端應用程序。HTML5客戶端應用程序打開文件對話框

我使用隱藏的輸入類型文件來獲取文件對話框。

<input id="image-input" class="hidden" type="file" accept="image/*" @change="imageFileSelected"> 
<button type="button" title="Change Image" @click="openImage"><img src="icons/open-image.png"></button>

您可以忽略我使用Vue的事實，因爲這些只是本地onclick和onchange事件。這個問題一般適用於HTML5。該按鈕可在Firefox，Edge和Chrome中觸發隱藏文件輸入。但是，我注意到後面兩個問題，即當您選擇同一個文件兩次時，onchange事件不會被觸發。

我已經看到數百萬個其他話題，建議value = null。該解決方案工作得很好，除了一個小的細節。 Firefox會記住您上傳並自動選擇的最後一個文件，因此爲Chrome和Edge添加此修補程序會打破Firefox中的所需功能。我希望對話框記住最後一個文件的原因是因爲應用程序本身的性質。我希望用戶可能想要處理其中一個文件，然後決定通過重新加載相同的文件重新開始。

表現出同樣的問題

openImage() { 
    var el = document.getElementById('image-input'); 
    el.value = null; 
    el.click(); 
},

其他應用：

它似乎沒有人意識到這一點，否則少了點關心他們的對話是否記住上次選擇的文件。無論如何，有沒有人知道一種方法來解決這個問題，而不會破壞我期望的Firefox功能？

來源

2017-08-06 Goombert

爲什麼不檢查它的Firefox然後不應用修復？ – mygeea

這是一種可能性，但我不喜歡它，因爲我永遠無法確定Firefox是否會改變它的行爲。例如，Firefox會在未來版本中兩次選擇相同的文件嗎？理想情況下，我希望Edge和Chrome上的對話框也能像Firefox那樣記住文件。 – Goombert

我有一個類似的問題（我只測試Firefox和Chrome）。即使再次選擇了相同的文件，我也希望Chrome能夠觸發「更改」事件。

我做了重置爲空字符串作爲處理click事件後如下圖所示下面，這樣對你的代碼會是這樣：

openImage() { 
    var el = document.getElementById('image-input'); 
    el.click(); 
    el.value = ""; // instead of el.value = null 
}.

我力測試邊瀏覽器。也許你可以試試這個，並告訴它是否也可以在Edge上運行。希望它有助於:)

來源

2018-01-02 03:59:31 Sourav

HTML5客戶端應用程序打開文件對話框

回答

相關問題