HTML5로 클라이언트 측에서 파일 크기 확인하는 방법

HTML5로 클라이언트 측에서 파일 크기 확인하기

HTML5가 등장하기 전에는 웹에서 파일 크기를 확인하려면 플래시(Flash)에 의존해야 했습니다. 그러나 보안 및 성능 문제로 인해 최근 웹 애플리케이션에서는 플래시 사용을 지양하고 있습니다. 다행히 HTML5의 File API를 활용하면 별도의 플러그인 없이 자바스크립트만으로 클라이언트 측에서 파일 크기를 손쉽게 확인할 수 있습니다.

File 객체의 size 속성 사용하기

파일 입력 요소(<input type="file">)에서 선택된 파일은 files 배열에 저장되며, 각 파일 객체는 바이트 단위의 크기를 나타내는 size 속성을 가지고 있습니다. 아래 코드를 이벤트 리스너 안에 넣으면 파일 크기를 확인할 수 있습니다.

if (typeof FileReader !== "undefined") {
    // files[0]은 첫 번째 파일
    var s = document.getElementById('myfile').files[0].size;
}

위 코드는 먼저 브라우저가 FileReader 객체를 지원하는지 검사한 후, id가 'myfile'인 파일 입력 요소에서 첫 번째 파일의 크기를 가져옵니다.

change 이벤트로 파일 선택 시점에 크기 확인하기

사용자가 파일을 선택할 때마다 크기를 자동으로 확인하려면 onchange 이벤트 리스너를 등록하면 됩니다.

document.getElementById('input').onchange = function() {
    // files[0]은 첫 번째 파일
    var s = document.getElementById('input').files[0].size;
    alert(s);
};

이렇게 하면 사용자가 파일을 선택하는 순간 해당 파일의 크기(바이트 단위)가 알림 창으로 표시됩니다.

바이트를 KB 또는 MB로 변환하기

size 속성은 바이트 단위 값을 반환하므로, 사용자에게 더 읽기 쉬운 형태로 보여주려면 다음과 같이 변환할 수 있습니다.

var bytes = document.getElementById('input').files[0].size;
var kb = (bytes / 1024).toFixed(2); // KB 단위로 변환
console.log(kb + ' KB');

활용 팁

클라이언트 측에서 파일 크기를 미리 검사하면 업로드 전에 용량 제한을 초과하는 파일을 걸러낼 수 있어, 불필요한 서버 요청을 줄이고 사용자 경험을 크게 개선할 수 있습니다. 다만 클라이언트 측 검증은 우회될 수 있으므로, 서버 측에서도 반드시 파일 크기를 한 번 더 확인하는 것이 안전합니다.