[자바스크립트] 업로드 파일 용량, 확장자, 특수문자 체크하기

아래 소스 코드는 파일을 선택할 때 파일 크기, 확장자 및 파일명에 특수문자를 검사하는 스크립트 함수입니다. 파일을 선택할 때 호출되며 조건에 맞지 않을 때 경고 메시지를 표시하고 필드를 초기화합니다. 간단한 함수이니 확인하시고 응용해서 사용하시면 됩니다.

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function filechk(obj){
	var fileSize = obj.files[0].size;
	var maxSize = 100 * 1024 * 1024; //100mb
	var ext = $(obj).val().split(".").pop().toLowerCase();       
	
	//파일명에 특수문자 검사 (정규 표현식 사용)
	var fileName = $(obj).val().split("\\").pop(); // 파일 경로에서 파일명 추출
	var specialChars = /[*|\":<>[\]{}`\\()';@&$]/; // 특수문자를 나타내는 정규 표현식

	//파일용량 체크
	if(fileSize > maxSize){ 
		alert("파일 크기가 너무 큽니다. 최대 크기는 100MB입니다.");
		$(obj).val('');
		return false;
	}
	//파일 확장자 체크
	if($.inArray(ext, ["jpg", "jpeg", "png", "gif", "bmp", "pdf"]) == -1) {
		alert("올바른 파일 확장자가 아닙니다. 허용된 확장자는 jpg, jpeg, png, gif, bmp, pdf 입니다.");
		$(obj).val('');
		return false;
	}

	//파일명에 특수문자 체크
	if (specialChars.test(fileName)) {
		alert("파일명에 특수문자가 포함되어 있습니다. 특수문자를 제거해주세요.");
		$(obj).val(''); // 파일 선택 필드 초기화
		return false;
	}
}
</script>
<form enctype="multipart/form-data" action="upload.php" method="post">
	<input type="file" name="fileToUpload" onchange="return filechk(this);">
</form>