HTML 폼에서 여러 개의 파일을 한 번에 업로드할 수 있도록 하려면 multiple 속성을 사용하면 됩니다. 이 속성은 file 타입과 email 타입의 입력 필드에서 동작합니다.
JavaScript로 업로드 파일 수 제한하기
다중 입력 필드에서 선택할 수 있는 파일의 최대 개수를 제한하려면 JavaScript를 활용해야 합니다. multiple 속성만으로는 파일 개수 제한이 불가능하기 때문에, 사용자가 선택한 파일 목록의 길이를 확인하는 방식으로 구현합니다.
예를 들어, 한 번에 최대 3개의 파일만 업로드할 수 있도록 제한하고 싶다면, 제출 버튼을 클릭하는 시점에 파일 개수를 검사하여 초과했을 경우 경고 메시지를 표시하도록 처리할 수 있습니다.
예제 코드
아래 코드는 multiple 속성을 사용한 다중 파일 업로드 폼과, JavaScript(jQuery)로 업로드 파일 수를 제한하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML file upload</title>
</head>
<body>
<form>
<input type="file" action="/action_page.php" name="name" multiple><br/>
여러 개의 파일을 선택한 후 제출 버튼을 클릭하세요.<br>
<input type = "submit" value = "submit">
</form>
<script>
$(function(){
$("input[type = 'submit']").click(function(){
var $fileUpload = $("input[type='file']");
if (parseInt($fileUpload.get(0).files.length) > 3){
alert("최대 3개의 파일만 업로드할 수 있습니다.");
}
});
});
</script>
</body>
</html>동작 원리
위 예제의 핵심 로직은 다음과 같습니다.
1. 제출 버튼 클릭 시 click 이벤트가 발생합니다.
2. $fileUpload.get(0).files를 통해 사용자가 선택한 파일 목록(FileList 객체)에 접근합니다.
3. files.length로 파일 개수를 확인하고, 3개를 초과하면 alert()으로 경고 메시지를 출력합니다.
참고로, 실무에서는 경고 표시와 함께 e.preventDefault()를 호출하여 폼 제출 자체를 막는 것이 좋습니다. 또한 클라이언트 측 검증은 우회될 수 있으므로, 서버 측에서도 반드시 파일 개수를 다시 확인해야 안전합니다.