JQueryで、input type="file" で添付されたファイル名を動的に取得・表示したい

Question

ちょっと変な質問かもしれませんが、以下のようなHTMLがあるとします。

<input class="file_up" type="file">
<span classs="file_name"></span>

やりたきことは、input type="file" に添付された「ファイル名（拡張子を含む）」を、spanタグの中に表示したいのですが、条件として、添付ファイルを別のものに差し替えるなど、添付されたものが変わった瞬間にspanタグの中に表示されるファイル名も変えたいです。（添付ファイルがない場合はspanタグの内容はカラにしたいです）

ためしたこと

$(function(){
  $('input [type = file]').change(function(){
    $('.filename').val($('input [type = file]'));
  });
});

ファイルを添付した時点でinput type="file" の横にファイル名が表示されることは知っているのですが、今回、海より深い訳がありこのような質問をさせていただきました。

jQueryにお詳しい方、どうぞご教示をお願いいたします。

Comments

[kei344]

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips#questionTips1-1

[nekomaru01]

kei344様
失礼しました。私の試したことを記載しておりませんでした。

Answer 1

「 input type= file ファイル名 」で検索してみましょう。
セレクタの使い方もおかしいので、そのあたりも調べてみてください。

Comments

[nekomaru01]

いただいた検索ワードで探していろいろ試してみたところ、望む挙動ができました。
ありがとうございます。