Help us understand the problem. What is going on with this article?

<input type="file">で同じファイルを選択してもchangeイベントをトリガーさせる

More than 1 year has passed since last update.

changeonchangeイベントは、入力欄の内容を変更した時の発火されるイベント
しかし、同じファイルを選択した場合、changeイベントは発生しません😓

解決策

<input id="file" type="file" onchange="myFunction()"/>
function myFunction() {
 // ・・・
 document.getElementById("file").value = '';
}

changeイベント時に該当要素のvalue(ファイルパス)を空にします
これにより同じファイルを選択しても、changeイベントがトリガーされます✌️

jQueryを使用する場合

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

valueについて

valueへの空文字の設定が認められているブラウザは、
value=''とすればvalueの値はクリアされますが、それ以外のブラウザにも対応させるには別のやり方が必要になります💦

セキュリティ上の理由による制約

type="file"valueプロパティへのアクセスには、
セキュリティ上の理由により制約が設けられています

ブラウザが設定できないように決めているため、ブラウザ毎で微妙に挙動が変わってきます😱
ブラウザによっては下表のように違いがある✅

ブラウザ 取得結果の書式 空(設定) 空文字以外(設定)
Google Chrom C:\fakepath\filename ×
Mozilla Firefox filename ×
Safari C:\fakepath\filename ×
Opera C:\fakepath\filename × ×
Internet Explorer 6,7,8,9 C:\fakepath\filename × ×
  • 取得: C:\fakepath\filename のパスのみ
  • 設定: 空文字とnullのみ

form.reset()を使用してファイル入力のファイルリストをクリアすることができますが、
この場合すべてのフィールドがデフォルト値にリセットされるので、フォームのtype="file"のみをクリアすることはできません😓

参考

How to detect input type=file "change" for the same file?

_Keitaro_
2015.12からWEB制作会社で、主にWEBシステム開発の仕事をしています。
karabiner
主にシステム開発・アプリ開発・ Webサイト制作を行う会社です
http://www.karabiner.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away