こんにちは!
今回は「input type="file"で画像(ファイル)選択時にonChangeイベントを必ず発生させる方法」についてお伝えしたいと思います。
inputタグでのonChangeイベントはvalueの値が変更されたときに発火します。
そのため、初めファイルAを選択したときにはonChangeイベントが発火するが、再度ファイルAを選択したときはonChagngeイベントは発火しません。
毎回必ず発火するようにするには若干制約はあるものの、実装することはできます。
onChangeイベントを必ず発生させるには画像(ファイル)選択時にinputのvalueを空にする
onChangeイベントを画像(ファイル)選択時に必ず発生させるようにするためには、画像選択時にvalueを空にする必要があります。
以下、サンプルコードです。
<!-- html-->
<div>
<input id="image" accept="image/*" name="picture" type="file" />
</div>
// onChangeのイベント
const selectImage = () = {
// 必要な処理を記述
// ・・・
const fileInput = document.getElementById('image');
fileInput.value = ''; // valueを空にすることで、再度同じファイルを選択してもonChangeイベントを発火させる
};
これで再度同じ画像を選択してもonChange
イベントが発火するようになります。
ただし、1点制約事項(デメリット)があります。
onChange
イベント内でvalue
を空にしているため、ファイル名が表示されず、常に「選択されていません」と表示されてしまいます。
どちらがよいかは要件次第といったところでしょうか。
以上、お疲れ様でした〜🍵