[JQUERY/JSP/JAVASCRIPT] 자바스크립트 파일 업로드 제한, 파일 최대용량 제한, JQUERY 파일 용량 제한

클라이언트 측에서 파일 크기를 미리 확인하는 것이 서버 부하를 줄이는데 더 효과적일 수 있음

1- 사전 필터링: 서버에 도달 전 크기가 큰 파일을 걸러낼 수 있으므로, 서버로 전송되는 데이터 양이 줄어 서버 부하 감소
2- 빠른 응답: 서버 측에서 추가적인 검증이나 처리를 할 필요가 없어지므로, 클라이언트에게 더 빠른 응답 가능
3- 확장성: 서버 측에서 파일 크기를 확인하는 경우, 파일 업로드가 많을수록 서버의 부하가 증가할 수 있으나, 클라이언트 측에서 파일 크기를 확인하면 서버 측에서는 파일 크기를 검증하는 추가적인 부하 없이도 더 많은 요청을 처리 가능

1. JAVASCRIPT

<script type="text/javascript">
    $(document).ready(function() {
        $('#gridExcelUploadForm').submit(function(event) {
            var fileSize = $('#gridExcelUp')[0].files[0].size; // 파일 크기 확인
            if (fileSize > 10485760) { // 10MB 제한
                event.preventDefault(); // 기본 이벤트(업로드) 막기
                alert('파일 크기가 너무 큽니다.');
            }
        });
    });
</script>

 

2. HTML 

<form action="/common/grid/excel/fileUp/excel.data" method="post" id="gridExcelUploadForm">
    <input type="file" id="gridExcelUp" name="gridExcelUp" validate="excel"/>
    <input type="submit" value="upload"/>
</form>