[JavaScript] 파일이미지 유효성검사하기

이미지파일만 받고, 또 파일 사이즈는 5mb 까지 받는 조건 유효성검사를 체크하는 방법

 

해당 코드는 이미지 파일을 받는 코드이다.

<input type="file" id="isFile" name="isFile" accept="image/*" />

 

사용자 지정 이미지 파일을 받을 수 있다.

<input type="file" id="file" name="file" accept="image/jpeg, image/png, image/jpg">

 

여기서 accept 옵션을 사용하면 파일첨부를 할 때 아래의 파일 선택을 클릭한 것과 같이

 

 

위 이미지와 같이 파일 형식이 이미지와 모든 파일을 제외하고 선택할 수 없다.

 

하지만 모든 파일을 선택하게 되면 원하는 이미지파일만 받지는 않게 된다.

 

그래서 자바스크립트로 유효성체크를 해보자.

 

var imgFile = $('#isFile').val();
var fileForm = /(.*?)\.(jpg|jpeg|png|gif|bmp|pdf)$/;
var maxSize = 5 * 1024 * 1024;
var fileSize;

if($('#isFile').val() == "") {
	alert("첨부파일은 필수!");
    $("#isFile").focus();
    return;
}

if(imgFile != "" && imageFile != null) {
	fileSize = document.getElementById("isFile").files[0].size;
    
    if(!imgFile.match(fileForm)) {
    	alert("이미지 파일만 업로드 가능");
        return;
    } else if(fileSize = maxSize) {
    	alert("파일 사이즈는 5MB까지 가능");
        return;
    }
}

 

참조 : jfbta.tistory.com/25