input[type="file"] 同じファイルを選んでもchangeイベントが発火しない問題をちょっとだけ深掘りするよ🎶 - カミナシ エンジニアブログ

input[type="file"] 同じファイルを選んでもchangeイベントが発火しない問題をちょっとだけ深掘りするよ🎶 - カミナシ エンジニアブログ

「よし、これで完璧！」と思って実装したファイルアップロード機能。テストで同じファイルを2回選んだら...概要を表示 「よし、これで完璧！」と思って実装したファイルアップロード機能。テストで同じファイルを2回選んだら...あれ？2回目は何も起きない。 // さっきまで動いてたはずなのに... <input type="file" onChange={(e) => { console.log('ファイル選択した！', e.target.files[0]); uploadFile(e.target.files[0]); }} /> 「え、なんでonChange動かんの...？」 Chromeのコンソールとにらめっこすること数分。これ、実は私の実装ミスじゃなくて、ブラウザの仕様に起因する面白い問題だったんです。今日は、この挙動を掘り下げて、Web標準とブラウザによる挙動の違いについて話してみたいと思います。 そもそもchangeイベントってさぁ 教科書的な説明を確認してみる MDNのchangeイベントのドキュ

• ブラウザ
• HTML
• javascript
• chrome
• あとで読む
• web制作
• web