input file 커스텀하는 방법 | 파일 업로드 버튼 꾸미기부터 파일명 표시까지
CSS 26.07.06 조회 10input file 커스텀하는 방법 | 파일 업로드 버튼 꾸미기부터 파일명 표시까지
1 | <input type="file"> | cs |
<input type="file">만 작성해도 파일 업로드 기능은 사용할 수 있습니다.
하지만 버튼의 디자인은 브라우저에서 기본으로 제공하기 때문에 자유롭게 꾸미기 어렵습니다.
그래서 대부분의 프로젝트에서는 별도의 UI를 만들어 사용합니다.
✏️ 커스텀.ver 파일 업로드 html 구조 파악하기
커스텀 방식에서는 파일을 선택하는 input과 사용자가 클릭하는 버튼 역할의 label을 분리합니다.
또한 선택한 파일명을 표시하기 위한 input을 하나 더 추가합니다.
· input[type="file"] : 실제 파일 선택
· label : 버튼 역할
· .file-name : 선택한 파일명 출력
1 2 3 4 5 6 7 | <div class="form__item"> <span class="flex"> <input type="file" name="bf_file[]" id="sh_file" class="file-hidden" accept=".jpg,.jpeg,.png,.pdf,.hwp,.doc,.docx"> <input type="text" class="file-name" placeholder="파일을 선택해주세요." readonly> <label for="sh_file" class="file-btn">파일찾기</label> </span> </div> | cs |
✏️ JavaScript로 파일명 가져오기
change 이벤트는 사용자가 새로운 파일을 선택했을 때 실행됩니다.
this.files[0].name : 첫 번째 파일의 이름을 가져와 .file-name 입력창의 값으로 넣어주는 방식입니다.
1 2 3 4 5 6 7 8 9 10 11 | $('#sh_file').on('change', function () { let fileName = ''; if (this.files && this.files.length > 0) { fileName = this.files[0].name; } // file-name에 파일명 출력 $(this) .closest('.form__item') .find('.file-name') .val(fileName); }); | cs |
See the Pen input file 커스텀하는 방법｜파일 업로드 버튼 꾸미기부터 파일명 표시까지 by designkits (@designkits) on CodePen.
✨ 자주 묻는 질문
Q : input file을 CSS만으로도 꾸밀 수 있나요?
브라우저마다 지원 범위가 달라 제한적입니다.
일반적으로는 input을 숨기고 label을 버튼처럼 사용하는 방식이 가장 많이 사용됩니다.
Q : 왜 label을 사용하나요?
label의 for 속성과 input의 id를 연결하면 label을 클릭했을 때도 파일 선택 창이 열립니다.
Q : 선택한 파일명은 어떻게 가져오나요?
