[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 태그 안에서 실행되어 이름을 가져와서 표시할 수 있습니다.

이상으로 구현할 수 있었습니다!
보다 효율적인 방법 등이 있으면 댓글 주시면 감사하겠습니다.

참고