웹 애플리케이션에서 파일을 업로드할 때는 서버 부하와 저장 공간 관리를 위해 파일 크기를 사전에 검증하는 것이 좋습니다. JavaScript의 File 객체가 제공하는 size 속성을 활용하면 클라이언트 측에서 간단하게 파일 크기를 확인할 수 있습니다.
동작 원리
<input type="file"> 요소의 files 속성은 사용자가 선택한 파일 목록을 담고 있으며, files[0].size는 파일 크기를 바이트(byte) 단위로 반환합니다. 이 값을 1024로 나누면 KB 단위로 변환할 수 있고, 허용 용량(예: 4096KB = 4MB)과 비교하여 업로드 가능 여부를 판단합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>파일 크기 검증</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>업로드 시 파일 크기 검증하기</h1>
<input type="file" class="file" onchange="validateFile()" />
<div class="result"></div>
<h3>위의 파일 입력창을 통해 파일을 업로드해 보세요</h3>
<script>
let resEle = document.querySelector(".result");
let fileEle = document.querySelector(".file");
function validateFile() {
if (fileEle.files.length) {
let fileSize = Math.round(fileEle.files[0].size / 1024);
if (fileSize > 4096) {
resEle.innerHTML = "파일이 너무 커서 업로드할 수 없습니다.";
} else {
resEle.innerHTML = "업로드 가능한 파일입니다. 파일 크기 = " + fileSize + " KB";
}
}
}
</script>
</body>
</html>
코드 설명
onchange="validateFile()": 사용자가 파일을 선택하는 순간validateFile()함수가 자동으로 호출됩니다.fileEle.files.length: 파일이 실제로 선택되었는지 확인합니다. 선택된 파일이 없으면 아무 작업도 수행하지 않습니다.Math.round(fileEle.files[0].size / 1024): 바이트 단위의 파일 크기를 KB 단위로 변환하고 반올림합니다.fileSize > 4096: 파일 크기가 4096KB(약 4MB)를 초과하면 업로드를 제한하고, 그렇지 않으면 업로드 가능 메시지와 함께 파일 크기를 표시합니다.
실행 결과
'파일 선택' 버튼을 클릭하고 파일을 선택하면 아래와 같이 검증 결과가 화면에 표시됩니다.
이처럼 클라이언트 측에서 파일 크기를 미리 검사하면 불필요한 업로드 요청을 줄여 사용자 경험을 개선할 수 있습니다. 다만 보안을 위해 서버 측에서도 반드시 동일한 크기 제한 검증을 함께 수행하는 것이 좋습니다.