[JavaScript / jQuery] input type = "file" 확장자 설정하기

오늘은 파일 유효성 검사에 대해 작성해보겠습니다.

 

<input type="file" class="form-control" name="rt_rest_img" id="restImg" required>

음식점 이미지를 받는 인풋을 작성고,

여기에 파일 확장자와 크기로 값 전달을 못하도록 유효성검사를 작성했습니다.

 

1. 파일 확장자 제한하기

if($('#restImg').val() != "" ){
    let ext = $('#restImg').val().split('.').pop().toLowerCase();
  if($.inArray(ext, ['png','jpg','jpeg']) == -1) { // 원하는 확장자명
     alert('등록 할수 없는 파일명입니다.');
     $("#restImg").focus(); // 파일 인풋 창으로 포커스를 잡아준다
     $("#restImg").val(""); // 파일명을 지워준다.
     return false;
  }
}

  - 인풋에 값을 넣었을 때, 그 값을 들고와서 확장자를 비교합니다.

  - 어레이 [] 안에는 원하는 확장자명을 작성해줍니다.

 

2. 파일 용량 체크하기

if($('#restImg').val() != ""){
    let fileSize = document.getElementById("restImg").files[0].size;
    let maxSize = 3 * 1024 * 1024; // 3MB

    if(fileSize > maxSize){
        alert("파일 용량은 3MB 이내로 등록 가능합니다. ");
        $("#restImg").focus();
        $("#restImg").val("");
        return false;
     }
}

  - 인풋에 값을 넣었을 때, 그 값을 들고와서 파일의 사이즈를 가지고 옵니다.

  - 그리고 원하는 사이즈의 값을 지정해주고, 둘을 비교합니다.