HTML5에서 input type=file 파일 크기 검증하기

HTML5에서 파일 업로드 크기를 확인해야 하는 이유

웹 애플리케이션에 파일 업로드 기능을 구현할 때는 사용자가 지나치게 큰 파일을 올리지 않도록 사전에 검증하는 것이 중요합니다. 서버에서 처리하기 전에 클라이언트 측에서 먼저 파일 크기를 확인하면 불필요한 트래픽과 오류를 줄일 수 있고, 사용자에게도 즉각적인 피드백을 제공할 수 있습니다.

다행히 HTML5의 File API를 사용하면 별도의 라이브러리 없이도 선택된 파일의 크기를 손쉽게 알아낼 수 있습니다. 핵심은 <input type="file"> 요소의 files[0].size 속성으로, 이 값은 바이트(byte) 단위로 반환됩니다.

파일 크기 검증 예제 코드

아래 예제는 폼 제출 시점에 파일 크기를 검사하여, 허용된 최대 크기를 초과하면 전송을 막는 방식입니다. 최대 허용 크기는 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'){
            // data-max-size 속성에서 최대 허용 크기(바이트)를 읽어옵니다.
            var max = parseInt($(this).attr('data-max-size'), 10),
                mySize = this.files[0].size; // 선택된 파일의 실제 크기(바이트)

            // 파일 크기가 최대값보다 작거나 같으면 true
            val = max > mySize;
            return val;
          }
        });

        return val; // false를 반환하면 폼 제출이 취소됩니다.
      });
    });
  </script>
</body>
</html>

코드 동작 원리

data-max-size 속성: 각 파일 입력 요소마다 허용 가능한 최대 크기를 바이트 단위로 지정합니다. 위 예제에서는 32,154바이트(약 31KB)입니다.
선택자 input[type=file][data-max-size]: 최대 크기가 설정된 모든 파일 입력 요소를 한 번에 순회하므로, 여러 개의 파일 필드가 있는 폼에서도 확장하여 사용할 수 있습니다.
this.files[0].size: 사용자가 파일을 선택했다면 첫 번째 파일 객체의 크기를 바이트 단위로 가져옵니다. 파일이 선택되지 않은 경우 undefined이므로, 이를 먼저 확인해 오류를 방지합니다.
검증 결과 반환: 파일 크기가 최대값보다 작으면 true, 초과하면 false를 반환합니다. 제출 이벤트 핸들러에서 false를 반환하면 폼 전송이 취소됩니다.

주의할 점과 개선 팁

속성 이름 일치: 원본 예제에서는 attr('max-size')로 값을 읽었지만, 실제 속성명은 data-max-size이므로 값이 NaN이 되어 검증이 정상적으로 동작하지 않습니다. 위 코드처럼 attr('data-max-size') 또는 jQuery의 $(this).data('max-size')를 사용해야 합니다.

사용자 피드백 추가: 크기 초과 시 조용히 제출만 막히면 사용자가 원인을 알기 어렵습니다. 다음과 같이 경고 메시지를 함께 보여주는 것이 좋습니다.

val = max > mySize;
if (!val) {
  alert('파일 크기가 허용된 최대 크기를 초과했습니다.');
}

클라이언트 검증은 보조 수단일 뿐: 브라우저 측 검증은 우회될 수 있으므로, 반드시 서버 측에서도 파일 크기를 다시 확인해야 안전합니다.