【JavaScript・TypeScript】同じファイル選択でchangeイベントをトリガーさせる方法【技術メモ】

スポンサーリンク
IT
この記事は約4分で読めます。
スポンサーリンク

どうも、こんにちは。widen uno(@widen_uno)です。

同じファイルを選択した場合、changeイベントがトリガーされてない!どうすればいいの?

JavaScriptやTypeScriptでウェブアプリケーションを実装している時に、「同じファイルを選択するとchangeイベント、onchangeイベントがトリガーされていない!」と言う問題に直面したため、技術メモシリーズとして簡単に解決策をご紹介します。


ブログで収益化していきたい方はGoogleアドセンスについてチェックしてみてください!

スポンサーリンク

この記事を書いた人

UNO
ウェブサイト制作と投資を愛するブロガー
【経歴】
・東京在住
・外資系企業就職
・自粛期間に複業スタート
・2021年2月から本格的にブログ開始
・半年で月間2万PV達成
・1年で月間4.9万PV達成


なんでトリガーされないの?

入力値が変更されることで発火されるイベントが、changeイベントです。

しかし、同じファイルを選択するとイベントはトリガーされません。

ブラウザが「あ、同じファイルね!」といった感じで、無視してしまうためです。

そこで、changeイベント内のvalueを空にしてあげる必要があります。

以下に、JavaScript・jQuery・Angularでの解決策を記載いたします。

JavaScriptの解決策

JavaScriptの解決策は以下です。

changeイベント時にfileのvalueを空にします。

<!-- hoge.html -->
<input id="file" type="file" onchange="onChange()"/>
function onChange() {
 // ・・・
 document.getElementById("file").value = '';
}

jQueryの解決策

jQueryの解決策は以下です。

通常のJavaScript同様に、changeイベント時にfileのvalueを空にします。

<!-- hoge.html -->
<input id="file" type="file"/>
$('#file').change(function(){
 // ・・・
 $(this).val('');
});

Angularの解決策

Angularの解決策は以下です。

通常のJavaScript同様に、changeイベント時にfileのvalueを空にします。

// hoge.ts
@ViewChild('file') file: any;
//・・・
onChange() { 
  this.file.nativeElement.value = ''; //valueを空にする
}

おすすめ書籍

JavaScriptを学び始めた方から中級エンジニアの方には「JavaScript コードレシピ集」がすごく最適です。

現場で良く使われるテクニックから、上級エンジニアが使う技まで学ぶことができます。

Kindleでも読むことができるため、下記にAmazonのリンクを貼っておきます。

JavaScript コードレシピ集
Amazonで池田 泰延, 鹿野 壮のJavaScript コードレシピ集。アマゾンならポイント還元本が多数。池田 泰延, 鹿野 壮作品ほか、お急ぎ便対象商品は当日お届けも可能。またJavaScript コードレシピ集もアマゾン配送商品なら通常配送無料。

Angularを学びたい方には、「Angularアプリケーションプログラミング」一択だと思います。

日本語対応のAngularに関する書籍や情報は貴重です。

これひとつあるだけで、学習本かつ辞書になると思います。

こちらもKindleでも読むことができるため、下記にAmazonのリンクを貼っておきます。

Angularアプリケーションプログラミング
Amazonで山田 祥寛のAngularアプリケーションプログラミング。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

まとめ

知らないと意外と戸惑う部分であるため、簡単に技術メモとして残しておきました。

ぜひ参考にしてみて下さい。

 

ブログで本格的に収益化していきたい方におすすめなアフィリエイトHowTo本はこちらです!

ぜひ合わせて読んでみて下さい。

Amazon.co.jp - アフィリエイトで夢を叶えた元OLブロガーが教える 本気で稼げる アフィリエイトブログ 収益・集客が1.5倍UPするプロの技79 | 亀山 ルカ, 染谷 昌利 |本 | 通販
Amazonで亀山 ルカ, 染谷 昌利のアフィリエイトで夢を叶えた元OLブロガーが教える 本気で稼げる アフィリエイトブログ 収益・集客が1.5倍UPするプロの技79。アマゾンならポイント還元本が多数。亀山 ルカ, 染谷 昌利作品ほか、お急ぎ便対象商品は当日お届けも可能。またアフィリエイトで夢を叶えた元OLブロガーが教...

タイトルとURLをコピーしました