JavaScript의 File.size 속성은 웹 API에서 제공하는 기능으로, 사용자가 선택한 파일의 크기를 바이트(byte) 단위로 반환합니다. 이 속성은 File 객체에서 읽기 전용(read-only)으로 동작하며, 파일 업로드 전에 크기 제한을 검사하거나 파일 정보를 화면에 표시할 때 매우 유용하게 활용됩니다.
아래 예제는 <input type="file"> 요소를 통해 파일을 선택하면, 해당 파일의 이름과 크기를 실시간으로 화면에 출력하는 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript file.size 속성 예제</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript file.size 속성</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>
위의 파일 선택 버튼을 클릭하여 파일을 업로드하면 파일 크기가 표시됩니다.
</h3>
<script>
let resultEle = document.querySelector(".result");
document
.querySelector(".fileInput")
.addEventListener("change", (event) => {
resultEle.innerHTML += "파일 이름 = " + event.target.files[0].name + '<br>';
resultEle.innerHTML += "파일 크기 = " + event.target.files[0].size + ' bytes';
});
</script>
</body>
</html>실행 결과
페이지를 실행하면 다음과 같이 파일 선택 버튼이 표시됩니다.
'파일 선택(Choose file)' 버튼을 클릭하고 파일을 선택하면, 아래와 같이 파일 이름과 크기가 바이트 단위로 함께 출력됩니다.
주요 포인트 정리
- 반환 값: 파일 크기를 바이트 단위의 숫자(number)로 반환합니다.
- 읽기 전용:
size값은 직접 수정할 수 없습니다. - 활용 사례: 업로드 전 파일 용량 검증, 진행률 표시, 대용량 파일 차단 등에 활용됩니다.
- 단위 변환 팁: KB로 변환하려면 값을 1024로 나누고, MB는 1024 × 1024로 나누면 됩니다.