<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
반응형
'FE > html' 카테고리의 다른 글
| Uncaught TypeError: $.ajax is not a function (0) | 2022.08.04 |
|---|---|
| Uncaught TypeError: $(...).summernote is not a function (0) | 2022.08.03 |
| [Error] org.thymeleaf.exceptions.TemplateInputException (0) | 2022.07.22 |
| [Thymeleaf] 게시글 상세보기에서 댓글 개수 출력 (0) | 2022.07.07 |
| [JS] 댓글 작성/수정/삭제 후 비동기 방식으로 출력 (0) | 2022.07.06 |