첨부파일 용량제한 처리하기(html, javascript)

첨부파일 용량은 서버에서 제한을 하게 된다.

본 포스팅은 서버설정은 다루지 않고, 오로지 클라이언트에서 사전 체크해주려고 할 때 참고하면 된다.

서버에서만 제한하고 클라이언트에서 체크하지 않으면, 원치 않는 오류를 만나게 된다.

​

제한할 용량은 다음 수식으로 계산할 수 있다.

​

메가바이트 * 1024 * 1024

​

즉, 10메가로 용량을 제한하려면 아래와 같이 변수 정의를 한다.

<script>
    var MAX_FILE_SIZE = 10 * 1024 * 1024;
</script>

이제, input 태그에 onchange 이벤트를 걸어준다.

<input type="file" onchange="file_onchange(this); />

마지막으로 file_onchange 함수는 다음과 같이 정의한다.

<script>
    function file_onchange(f) {
        if ( f.files[0] != null ) {
            var fileSize = f.files[0].size;
            if ( fileSize > MAX_FILE_SIZE ) {
                alert("파일용량은 10MB 이하만 가능합니다.");
                $(f).val('');
            }
        }
    }
</script>

즉, 10메가를 초과하는 파일이 선택되는 경우에 경고문구를 띄워주고 바로 선택을 취소해주는 것이다.