웹사이트에서 사용자가 외부 파일을 업로드할 수 있도록 하려면 파일 업로드 박스(파일 선택 상자라고도 함)를 사용해야 합니다. 이 컨트롤 역시 다른 폼 요소와 마찬가지로 <input> 요소로 생성하며, type 속성을 file로 설정하는 것이 특징입니다.
파일 선택 상자가 렌더링되면 브라우저에는 '파일 선택' 버튼과 함께 선택된 파일명이 표시되어, 사용자가 로컬 장치의 파일을 손쉽게 고를 수 있게 됩니다.
기본 예제
아래 코드를 실행하면 웹사이트에서 외부 파일을 업로드하는 기능을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<form>
<input type = "file" name = "upload" accept = "image/*" />
</form>
</body>
</html>위 예제에서 accept = "image/*" 옵션은 이미지 파일만 선택할 수 있도록 제한하는 역할을 합니다.
파일 업로드 박스의 주요 속성
| 번호 | 속성 및 설명 |
| 1 | name 컨트롤에 이름을 부여합니다. 폼이 제출될 때 이 이름이 서버로 함께 전송되어, 해당 컨트롤을 식별하고 값을 처리하는 데 사용됩니다. |
| 2 | accept 서버가 허용하는 파일 유형을 지정합니다. 예를 들어 image/*, .pdf, .docx 등 MIME 타입이나 확장자를 값으로 설정할 수 있습니다. |
실무 팁
실제로 파일을 서버로 전송하려면 <form> 태그에 반드시 enctype="multipart/form-data" 속성을 추가하고, method는 post로 설정해야 합니다. 또한 여러 개의 파일을 한 번에 선택하고 싶다면 multiple 속성을 함께 사용하면 됩니다.