input file 확장자 체크

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

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

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;
     }
} 

용량 유효성 체크는 위와같이 이용하시면 됩니다. maxSize 변수로 원하는 용량을 정하시면 됩니다.

3 * 1024 * 1024 는 3메가 이구요. 왼쪽 3 숫자를 10으로 바꾸시면 10메가 바이트로 

용량체크를 정하는 겁니다. 생각보다 이용할 곳이 많은 파일 업로드 유효성 체크! 

많이 응용하고 이용하세요.