javascript file.type 실패시 + 파일 확장자 체크하기

file이 어떤 종류의 파일인지를 확인할때, MIME타임을 사용하면 가장 정확하다.

javascript에서 file.type 속성을 이용하면 좋지만,
브라우저별로, 해당 값을 넘져주기 않을 때가 있어서, 확장자의 명으로 체크하는 방법을 메모해 둔다.

 

 

 

파일의 타입이 pdf인지 비교를 할때, Edge에서 file.type에서 이상한 결과가 나올때가 있다.

if(file.type == 'application/pdf' || file.name.toLowerCase().endsWith('pdf'))
{
    //code to execute 
}

 

file.name.toLowerCase().endWith('pdf')

endWidth() 끝부분이 다음과 같이 끝나면, true를 넘겨준다.

참고: https://stackoverflow.com/questions/32849014/ie-11-and-ie-edge-get-file-type-failed

 

[내가 만든 방식]

var fileTypes = ['application/pdf'];//MIME TYPE
var file = document.querySelector('#file_upload');

function validFileType(file) {
    for (var i = 0; i < fileTypes.length; i++) {
        if (file.type) {
            if (file.type === fileTypes[i]) {
                return true;
            }
        } else if (file.name.toLowerCase().endsWith('pdf')) { // Edge file.type 안나오는 것을 위해서.
            return true;
        }
    }
    return false;
}


 if (file.type) { //'',Null이면 실행하지 않음.
    if (file.type === fileTypes[i]) {
        return true;
    }
} else if (file.name.toLowerCase().endsWith('pdf')) { // Edge file.type 안나오는 것을 위해서.
    return true;
}

 

참고: https://stackoverflow.com/questions/32849014/ie-11-and-ie-edge-get-file-type-failed

 

 

IE9, IE8에서 pdf파일 알아내기

var file = $("#uploadCV").val();
    if (file.substr(file.lastIndexOf('.') +1).toUpperCase() == "PDF") 
    {
         $('.result').html('valid');
    }
    else
    {
           $('.result').html('not valid');
    } 
});

 

HTML 부분

<input id="uploadCV" type="file" name="uploadCV" accept="application/pdf" />
<div class="result"></div> 
<input type="button" id="sendMe" value="send" />

 

출처: https://stackoverflow.com/questions/18359188/jquery-checking-file-extension-not-working-in-ie

 

 

파일 확장자로 이미지, 비디오 파일 타입 체크하기

function getExtension(filename) {
    var parts = filename.split('.');
    return parts[parts.length - 1];
}

function isImage(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'jpg':
    case 'gif':
    case 'bmp':
    case 'png':
        //etc
        return true;
    }
    return false;
}

function isVideo(filename) {
    var ext = getExtension(filename);
    switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mpg':
    case 'mp4':
        // etc
        return true;
    }
    return false;
}

$(function() {
    $('form').submit(function() {
        function failValidation(msg) {
            alert(msg); // just an alert for now but you can spice this up later
            return false;
        }

        var file = $('#file');
        var imageChosen = $('#type-1').is(':checked');
        if (imageChosen && !isImage(file.val())) {
            return failValidation('Please select a valid image');
        }
        else if (!imageChosen && !isVideo(file.val())) {
            return failValidation('Please select a valid video file.');
        }

        // success at this point
        // indicate success with alert for now
        alert('Valid file!');
        return false; // prevent form submitting anyway
    });
 

 

(참고) https://stackoverflow.com/questions/7977084/check-file-type-when-form-submit

 

[그림 1. javasciprt로 받아오는 file  정보들]

파일 정보 보기