HTML5クライアント側のアプリケーションでファイルを開くダイアログ

Question

まずは、これを広範に調査し、セキュリティの意味を完全に理解していることを説明します。これは、JavaScript、Vue、および純粋な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の隠しファイル入力を正常に起動します。しかし、後の2つの問題は、同じファイルを2回選択したときにonchangeイベントが発生しないことに気付きました。

私は既に、value = nullを示唆する何百万という他のトピックを見てきました。その解決策は、1つの小さな自明な詳細を除いて、完全にうまく動作します。 Firefoxは最後にアップロードしたファイルを記憶して自動的に選択するので、この修正をChromeとEdgeに追加すると、Firefoxに存在する望ましい機能が失われます。最後のファイルを覚えておきたいのは、アプリケーションそのものの性質のためです。私は、ユーザーがファイルの1つで作業し、同じファイルを再度読み込んでやり直すことにしたいと思うかもしれません。これと同じ問題を呈する

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

他のアプリ：

1. http://blueimp.github.io/jQuery-File-Upload/
2. https://rowanwins.github.io/vue-dropzone/dist/index.html
3. https://fineuploader.com/demos.html

それは誰もがこのことを認識していないかだけでない他のようですそのダイアログが最後に選択したファイルを覚えているかどうかを気にします。それにもかかわらず、Firefoxの機能を壊すことなくこの問題を解決する方法を知っている人はいますか？

Answer 1

私は同様の問題がありました（私はFirefoxとChromeのみをテストしていました）。同じファイルが再び選択されたとしても、クロムが「変更」イベントを発生させたかったのです。

クリックイベントを処理した後、以下の下図のようにコードは次のようになりますあなたのためので、私は、空の文字列にリセットをした：私はテストエッジブラウザをDINT

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

。たぶんあなたはこれを試して、それがEdgeでも動作するかどうかを知ることができます。希望するそれは助けてください:)