[JQuery] アップロードしたときにファイルの名前を取得する

1631 ワード
初学者 jQuery jQuery テキストリンク

はじめに

inputタグのファイルアップロードの見た目って一辺倒で味気ないなと思ったので自作で作ってみることにしました。

最終的にはこんな感じになります

FontAwesomeを使ってアレンジしてみました。
アイコンの部分を押すとファイルを画像を選択してアップロードします、そしてアップロードした後にファイル名を表示させます。

本題

結論以下のようなコードで実装できます。

<span id ="push-image"></span>
<input type="file" class="image" id="upload_file" style="display: none">
<label class="image" for="upload_file" >
  <i class="far fa-image mx-3" aria-hidden="true"></i>
</label>

<script>
$(document).on('change', '.image',function(){
  if ($('.image').prop("files")[0] == null){
    $('#push-image').text("")
  }else{
    $('#push-image').append($('.image').prop("files")[0].name);
  }
});
</script>

inputタグのstyleをdisplay: noneにすることで最初の画像の部分は表示されなくなります。その上でlabelタグを使ってinputと連携しつつアイコン部分を表示しています。

そしてファイルを選択したときにScriptタグの中が実行されて名前を取得して表示することができます。

以上で実装できました！
もっと効率の良い方法などがあればコメントいただければ幸いです

参考