네, input type="file"로 선택한 파일의 크기와 유형을 검증하는 것은 충분히 가능합니다. HTML5의 File API를 활용하면 사용자가 선택한 파일의 크기(size)나 MIME 유형(type) 같은 정보에 접근할 수 있고, 여기에 jQuery를 함께 사용하면 폼 제출 전에 손쉽게 유효성 검사 로직을 구현할 수 있습니다.
파일 크기 검증 예제
아래 예제는 폼이 제출되기 전에 data-max-size 속성으로 지정한 최대 크기(바이트 단위)를 기준으로 업로드 파일의 크기를 확인하고, 기준을 초과하면 제출을 차단하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="file" id="myfile" data-max-size="32154" />
<input type="submit"/>
</form>
<script>
$(function(){
$('form').submit(function(){
var val = true;
$('input[type=file][data-max-size]').each(function(){
if(typeof this.files[0] !== 'undefined'){
var max = parseInt($(this).attr('data-max-size'),10),
mySize = this.files[0].size;
val = max > mySize;
return val;
}
});
return val;
});
});
</script>
</body>
</html>코드 동작 방식
- data-max-size 속성: 파일 입력 요소마다 허용 가능한 최대 파일 크기를 바이트 단위로 지정합니다. 위 예제에서는 약 32KB(32154바이트)입니다.
- this.files[0].size: File API를 통해 사용자가 선택한 첫 번째 파일의 실제 크기를 바이트 단위로 읽어옵니다.
- 폼 제출 이벤트 처리: 폼이 제출될 때
data-max-size속성이 있는 모든 파일 입력 요소를 순회하며 파일 크기가 최대 허용 크기보다 작거나 같은지 검사합니다. - 검증 실패 시: 파일 크기가 기준을 초과하면
false를 반환하여 폼 제출 자체를 막고, 사용자에게 더 작은 파일을 선택하도록 안내할 수 있습니다.
추가 팁: 파일 유형(MIME 타입) 검증하기
파일 유형도 같은 방식으로 확인할 수 있습니다. File API의 type 속성을 사용하면 됩니다.
var fileType = this.files[0].type; // 예: "image/png"
if(fileType !== 'image/png' && fileType !== 'image/jpeg') {
alert('PNG 또는 JPG 이미지만 업로드할 수 있습니다.');
val = false;
}또한 HTML 자체적으로도 <input type="file" accept="image/png, image/jpeg">처럼 accept 속성을 사용하면 파일 선택 대화상자에서 특정 유형만 표시하도록 제한할 수 있습니다. 다만 accept 속성은 어디까지나 브라우저 수준의 힌트일 뿐이므로, 보안과 데이터 무결성을 위해서는 서버 측에서도 반드시 파일 크기와 유형을 다시 검증해야 합니다.