はじめに

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タグの中が実行されて名前を取得して表示することができます。

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

参考