input file 확장자 체크

자바스크립트
2018. 10. 24. 17:21

자바스크립트 파일 확장자 체크

자바스크립트에서 파일 업로드 많이 쓰시죠? 클라이언트가 원하는 파일확장자와 용량만을 업로드하면 좋겠지만, 그렇지 않기에 유효성체크가 필요 합니다. 오늘은 자바스크립트에서 많이 쓰는 파일업로드 유효성체크에 대해서 올릴까 합니다.

javascript 파일 업로드 확장자 체크


      // 파일 업로드 확장자 체크
     if( $("#file_text").val() != "" ){
          var ext = $('#docufile').val().split('.').pop().toLowerCase();
  	  if($.inArray(ext, ['gif','png','jpg','jpeg','doc','docx','xls','xlsx','hwp']) == -1) {
  	     alert('등록 할수 없는 파일명입니다.');
  	     $("#file_text").val(""); // input file 파일명을 다시 지워준다.
  	     return;
 	  }
      }
});

소스는 간단하죠? 위와 같이 등록을 시키고 싶은 확장자명만 [ ] 안에 채워주시기만 하면 됩니다.

input file 아이디는 당연히 file_text 으로 맞춰서 이용하시면 될거 같네요.

javascript 파일 용량 체크


//용량체크
if(document.getElementById("file_text").value!=""){
    var fileSize = document.getElementById("file_text").files[0].size;
    var maxSize = 3 * 1024 * 1024;//3MB
 	 
    if(fileSize > maxSize){
       alert("첨부파일 사이즈는 3MB 이내로 등록 가능합니다. ");
        $("#file_text").val("");
        return;
     }
}