change、onchangeイベントは、入力欄の内容を変更した時の発火されるイベント
しかし、同じファイルを選択した場合、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"のみをクリアすることはできません😓
##参考