[jQuery] 제이쿼리 첨부파일 확장자 및 용량 체크(특수문자체크)

 

오늘은 제이쿼리로 첨부된 파일의 확장자 및 용량, 특수문자 체크하는 방법을 알아볼게요.

코딩을 하다보면 첨부된 파일을 체크해야 하는 경우가 있습니다.

 

jQuery 파일 확장자, 용량, 특수문자 확인 하는 방법

 

1) 첨부된 파일의 확장자 체크

2) 첨부된 파일의 용량 체크

3) 첨부된 파일의 특수문자 체크

 

보통 체크하는 부분이 저정도 인데 저부분을 제이쿼리로 어떻게 처리하는지 알아보겠습니다.

테스트로 인풋과 버튼을 만들어서 버튼을 클릭시 체크해보겠습니다.

 

html 코드

<input type="file" name="file" id="file" >
<button type="button" id="btnJoin" onclick="uploadFile();">

 

1) 첨부된 파일의 확장자 체크

function uploadFile() {
    var fileVal = $("#file").val();
    if( fileVal != "" ){
        var ext = fileVal.split('.').pop().toLowerCase(); //확장자분리
        //아래 확장자가 있는지 체크
        if($.inArray(ext, ['jpg','jpeg','gif','png']) == -1) {
          alert('jpg,gif,jpeg,png' 파일만 업로드 할수 있습니다.');
          return;
        }
    }
 }

 

2) 첨부된 파일의 용량 체크

 function uploadFile() {
    var maxSize = 10 * 1024 * 1024; // 10MB
    var fileSize = $("#file")[0].files[0].size;
    if(fileSize > maxSize){
    alert("첨부파일 사이즈는 10MB 이내로 등록 가능합니다.");
    $("#file").val("");
    return;
    }
 }

 

 

3) 첨부된 파일의 특수문자 체크

function uploadFile() {
    var fileVal = $("#file").val();
    var pattern =  /[\{\}\/?,;:|*~`!^\+<>@\#$%&\\\=\'\"]/gi;
    var fileName = fileVal.split('\\').pop().toLowerCase();
    if(pattern.test(fileName) ){
    alert('파일명에 특수문자가 포함되어 있습니다.');
    }
}