1. ホーム
  2. ジャバスクリプト

[解決済み】HTML入力ファイルの選択イベントが、同じファイルを選択しても発生しない。

2022-04-02 06:08:15

質問

ユーザーがHTMLファイルに対して行ったすべてのファイル選択を検出する方法はありますか? input タイプの file 要素ですか?

これは以前から何度も質問されていたことですが、通常提案される onchange イベントは、ユーザーが同じファイルを再度選択した場合には発生しません。

解決方法は?

の値を設定します。 input から null にそれぞれ onclick イベントが発生します。これによって input の値を変更し onchange イベントが発生します。

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};
<input type="file" value="C:\fakepath">

注:ファイルの先頭に'C:↵'が付いていても正常です。これはJavaScriptがファイルの絶対パスを知ることを防ぐためのセキュリティ機能です。ブラウザはまだ内部的にそれを知っています。