[JAVASCRIPT] 파일 확장자, 용량(사이즈) 확인 예제

파일을 올리기 전에 확장자와 용량을 확인해야 하는 경우가 생기는데요,

파일 확장자와 용량을 체크할 수 있는 스크립트를 알아보겠습니다.

 

---

 

1. 확장자 체크하기

function checkFile(obj, ext) {

    var check = false;
    var extName = obj.val().substring(obj.val().lastIndexOf(".") + 1).toUpperCase();
    var str = ext.split(",");
    
    for ( var i = 0; i < str.length; i++ ) {
    
        if (extName == str[i].trim()) {
        
            check = true;
            break;
            
        } else check = false;
        
    }
    
    if ( !check ) {
    
        alert(ext + " 파일만 업로드 가능합니다.");
        
    }
    
    return check;
    
}

 

- lastIndexOf 함수를 사용하여 확장자를 받아옵니다.

- 파라미터로 받은 ext를 콤마(,)를 기준으로 모두 잘라서 저장했습니다.

 

- 유효 확장자들과 파일의 확장자를 비교하여 true 혹은 false를 반환합니다.

- 만약 true라면 파일이 업로드 될 것이고, false라면 alert창이 뜨고 파일 업로드에 실패하게 됩니다.

 

 

2. 용량(사이즈) 체크하기

function checkFileSize(obj, size) {

    var check = false;
    var sizeinbytes = obj[0].files[0].size;
    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    var i = 0;
    var checkSize = size;
    
    while (checkSize > 900) {
    
        checkSize /= 1024;
        i++;
        
    }
    
    checkSize = (Math.round(checkSize * 100) / 100) + ' ' + fSExt[i];
    var fSize = sizeinbytes;
    
    if (fSize > size) {
    
        alert("첨부파일은 " + checkSize + " 이하로 첨부 바랍니다.");
        check = false;
        
    } else {
    
        check = true;
        
    }
    
    return check;
    
}

 

- 만약 사이즈가 900보다 크다면 1024로 나누고 fSExt 배열을 한 칸 이동했습니다.

- 따라서 Bytes였을 경우, KB로 변경됩니다.

 

- 만약 설정한 사이즈보다 파일 사이즈가 클 경우 alert 창을 띄워서 파일을 올리지 못하게 했습니다.

- 설정한 사이즈보다 작을 경우에는 파일이 업로드 됩니다.

 

 

3. 파일에 적용

var MaxSize = 10;
var FileExt = "PNG, JPG, JPEG";

document.getElementById('fileUpload').onchange = function () {

    if (this.value != "") {
    
        var extPlan = FileExt;
        var checkSize = 1024 * 1024 * MaxSize;
        
        if (!checkFile($('#fileUpload'), extPlan) | !checkFileSize($('#fileUpload'), checkSize)) {
            
            this.value = "";
            return;
            
        }
        
    }
    
};

 

- HTML 코드

<div>
    <input type="file" name="fileUpload" id="fileUpload" />
</div>

 

- HTML 코드에 있는 input type이 file이고 id가 fileUpload인 것을 불러왔습니다.

- 만약 fileUpload가 onchange 된다면 위의 스크립트 코드가 실행됩니다.

 

- MaxSize에 10을 넣었고, 1024를 두 번 곱하면 MB가 됩니다.

- 따라서 10MB를 넘는지 체크하는 스크립트 코드입니다.

 

- 파일이 10MB를 넘긴다면 파일이 올라가지 않을 것이고, 10MB를 넘지 않는다면 업로드됩니다.

 

 

 

이상으로 Javascript로 파일의 확장자 및 용량(사이즈)을 확인해보았습니다.

 

---