HTML에서 파일 업로드 버튼을 만드는 방법은 생각보다 훨씬 간단합니다. <input> 태그의 type 속성 값만 "file"로 지정해 주면, 브라우저가 기본으로 제공하는 "파일 선택" 버튼이 자동으로 생성됩니다. 별도의 JavaScript나 복잡한 설정 없이 한 줄의 코드로 구현할 수 있습니다.
기본 예제 코드
다음은 HTML로 파일 업로드 버튼을 만드는 전체 코드입니다.
<!DOCTYPE html> <html> <head> <title>파일 업로드 버튼 예제</title> </head> <body> <h1>파일 업로드 버튼 예제</h1> <p>"파일 선택" 버튼을 클릭하여 파일을 업로드하세요:</p> <form> <input type="file" id="FILE" name="filename"> </form> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 출력됩니다.
화면에 표시된 "파일 선택" 버튼을 클릭하면, 아래 그림처럼 운영체제의 파일 탐색 창이 열리며 업로드할 파일을 직접 고를 수 있습니다.
코드 설명
- <input type="file">: 파일 업로드 버튼을 생성하는 핵심 요소입니다.
- id="FILE": JavaScript나 CSS에서 해당 요소를 참조할 때 사용하는 고유 식별자입니다.
- name="filename": 폼(form) 제출 시 서버로 전송되는 데이터의 필드 이름입니다.
유용하게 쓸 수 있는 추가 속성
기본 기능에서 한 단계 더 나아가고 싶다면 다음 속성들을 함께 사용해 보세요.
- accept: 업로드할 수 있는 파일 형식을 제한합니다. 예를 들어 이미지 파일만 받으려면
accept="image/*"처럼 지정합니다. - multiple: 사용자가 한 번에 여러 개의 파일을 선택할 수 있게 해줍니다.
- required: 폼 제출 시 파일 선택이 필수임을 명시합니다.
<!-- 이미지 파일만 여러 개 업로드 가능 --> <input type="file" accept="image/*" multiple>
이처럼 HTML의 <input type="file"> 요소 하나만으로도 손쉽게 파일 업로드 버튼을 만들 수 있으며, 필요에 따라 다양한 속성을 조합해 원하는 동작을 구현할 수 있습니다.