プログラミング フロントエンド

【Javascript】input type="file"で画像(ファイル)選択時にonChangeイベントを必ず発生させたい

スポンサーリンク

こんにちは!

今回は「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 を空にしているため、ファイル名が表示されず、常に「選択されていません」と表示されてしまいます。

どちらがよいかは要件次第といったところでしょうか。

以上、お疲れ様でした〜🍵

スポンサーリンク

-プログラミング, フロントエンド
-

© 2024 エンジニア×ライフハック Powered by AFFINGER5