Dev/JavaScript

[Javascript] 파일 업로드 용량 체크하기 로직

늙은개발자 2022. 12. 1. 16:35
반응형

파일 업로드 시 고용량을 파일을 업로드하면 서버에 부담을 줄 수 있습니다.

그래서 서버까지 전달하지 않도록 Javascript에서 파일 용량을 체크할 필요가 있습니다.

 

용량 체크 소스

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>파일업로드 사이즈 체크</title>

 <script type="text/javascript">
 function filesize_chk(){
	 
	 var mb = 1024 * 1024; //1mb(메가)
	 var limit_size = mb * 5;
		 
	 var upload_size = document.frm.uploadfile.files[0].size;
	 
	 if(limit_size < upload_size){
		 alert('5mb 사이즈 미만만 \n업로드가 가능합니다.');
		 return false;	 
	 }else{
		 //성공로직
	 } 
	
 }
 </script>
</head>
<body>
<form method="post" name="frm">
	<input type="file" id="uploadfile" ><br><br>
	<button value="파일업로드" onclick="filesize_chk()">파일업로드</button>
</form>
</body>
</html>

 

 소스 설명

document.frm.[엘리먼트아이디].files[0].size

input type이 파일인 엘리먼트 아이디를 지정.

위의 소스를 사용하면 파일 사이즈를 알 수 있습니다.

 

위의 파일 용량과 1024 * 1024 * 1 -> 1MB 로직을 이용하여

파일 업로드 사이즈에 제한을 줄 수 있습니다.

 

반응형