FE/html
첨부 파일 UI
잔망루피
2022. 7. 31. 22:56
<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에서 파일 이름 확장명 가져오기
이 튜토리얼은 자바스크립트에서 파일 확장자를 얻는 방법을 나열합니다.
www.delftstack.com
[Spring Boot] 게시판 구현 하기 (4) - 파일 업로드 & 다운로드
앞의 글 에서 글을 수정하고 삭제하는 기능을 만들었습니다. 이번 시간에는 파일을 업로드하고 다운로드하는 기능을 구현해보겠습니다. 파일 업로드 구현하기 파일 업로드를 구현하기 전에, 어
kyuhyuk.kr
반응형