첨부 파일 UI

<div class="form-group">
    <label for="inputFile"><strong>첨부 파일</strong></label>
        <div class="custom-file" id="inputFile">
            <input name="file" type="file" class="custom-file-input" id="customFile" onchange="showFileName()" />
            <label class="custom-file-label" for="customFile">파일을 선택해 주세요.</label>
        </div>
</div>

 

 

<script>
        function showFileName(){
            const fileInput=document.getElementById("customFile");
            var fileName = $(fileInput).val().split('\\').pop();
            $(fileInput).siblings('.custom-file-label').addClass('selected').html(fileName);
        }
</script>

파일을 선택하면 input에 파일명이 출력되는 함수다.

결과는 아래와 같다.

 

결과

 

 

참고 👇

https://www.delftstack.com/ko/howto/javascript/javascript-filename-extension/

JavaScript에서 파일 이름 확장명 가져오기

 

https://kyuhyuk.kr/article/spring-boot/2020/07/22/Spring-Boot-JPA-MySQL-Board-Post-File-Upload-Download

[Spring Boot] 게시판 구현 하기 (4) - 파일 업로드 & 다운로드