[JQuery로 파일 확장자 추출 및 검증하기]

웹에서 파일을 업로드할 때 파일의 확장자를 추출하고 특정 확장자만 허용하고 싶을 때가 있다.
이번 글에서는 jQuery를 활용하여 파일 확장자를 가져오는 방법과
엑셀 파일(.xls, .xlsx)만 허용하는 코드를 정리해보겠다.

---

✅ 1. 파일 확장자 추출 방법

파일이 선택되었을 때, 파일명을 가져와 확장자만 추출하는 방법은 여러 가지가 있다.

📍 1) split('.')을 활용한 확장자 추출 (가장 간단한 방법)

function getFileExtension(filename) {
    return filename.split('.').pop().toLowerCase(); // 마지막 요소(확장자)를 반환 (소문자로 변환)
}

// 사용 예시
console.log(getFileExtension("example.xlsx")); // 출력: xlsx
console.log(getFileExtension("document.PDF")); // 출력: pdf
console.log(getFileExtension("image.png"));    // 출력: png

📌 설명:

• split('.')을 사용하면 "example.xlsx" → ["example", "xlsx"]로 나누어진다.
• .pop()을 사용하면 마지막 요소(xlsx)만 가져올 수 있다.
• toLowerCase()를 사용해 확장자를 소문자로 변환하여 비교를 쉽게 한다.

---

📍 2) lastIndexOf('.') + substring() 활용한 방법

function getFileExtension(filename) {
    var lastDot = filename.lastIndexOf(".");
    return (lastDot === -1) ? "" : filename.substring(lastDot + 1).toLowerCase();
}

console.log(getFileExtension("data.csv"));  // 출력: csv
console.log(getFileExtension("image.JPEG")); // 출력: jpeg

📌 설명:

• lastIndexOf('.')를 사용해 마지막 점(.)의 위치를 찾는다.
• substring(lastDot + 1)을 사용하면 확장자 부분만 추출 가능하다.
• 확장자가 없는 파일(noextension)이면 빈 문자열("")을 반환한다.

---

✅ 2. jQuery를 활용한 확장자 추출

📍 1) input[type="file"]에서 확장자 가져오기

<input type="file" id="excelFile">
<div id="fileExtension"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("#excelFile").change(function () {
            var filename = $(this).val().split("\\").pop(); // 파일명만 추출
            var extension = filename.split('.').pop().toLowerCase(); // 확장자 추출

            $("#fileExtension").text("파일 확장자: " + extension);
        });
    });
</script>

📌 설명:

• $(this).val().split("\\").pop(); → 파일명에서 경로를 제거하고 파일명만 가져온다.
• split('.').pop().toLowerCase(); → **마지막 점(.) 이후의 문자열(확장자)**을 가져온다.
• 확장자가 HTML에 출력되도록 설정했다.

---

📍 2) 특정 확장자만 허용하기 (.xls, .xlsx만 가능)

엑셀 파일(.xls, .xlsx)만 업로드 가능하도록 설정해보자.

$("#excelFile").change(function () {
    var filename = $(this).val().split("\\").pop();
    var extension = filename.split('.').pop().toLowerCase();

    if (extension !== "xls" && extension !== "xlsx") {
        alert("엑셀 파일만 업로드 가능합니다! (허용 확장자: .xls, .xlsx)");
        $(this).val(""); // 선택된 파일 초기화
        return;
    }

    $("#fileExtension").text("선택된 파일: " + filename + " (확장자: " + extension + ")");
});

📌 설명:

• .xls, .xlsx 파일만 허용하도록 제한했다.
• 허용되지 않은 파일을 선택하면 경고(alert) 띄우고 파일 선택을 초기화한다.

---

✅ 3. 확장자가 없는 파일 처리 (.이 없는 경우)

확장자가 없는 파일을 선택하면 오류가 발생할 수도 있다. 이를 방지하려면 아래 코드를 활용하면 된다.

function getFileExtension(filename) {
    var lastDot = filename.lastIndexOf(".");
    return (lastDot === -1) ? "" : filename.substring(lastDot + 1).toLowerCase();
}

// 테스트
console.log(getFileExtension("noextension")); // 출력: "" (빈 문자열)
console.log(getFileExtension("report.xlsx")); // 출력: xlsx
console.log(getFileExtension("image.tar.gz")); // 출력: gz (마지막 확장자)

📌 설명:

• 확장자가 없는 파일(noextension)이면 빈 문자열("")을 반환한다.
• image.tar.gz 같은 경우에는 마지막 확장자(gz)를 가져온다

---

✅ 4. 최종 정리

사용 방법코드

확장자 가져오기	split('.').pop().toLowerCase();
확장자가 없는 경우 처리	lastIndexOf('.') + substring()
input[type="file"]에서 확장자 추출	$(this).val().split('.').pop().toLowerCase();
특정 확장자만 허용	.xls, .xlsx 확인 후 alert()

 

---

🔥 📌 결론

✔ 파일 확장자는 split('.').pop()을 사용하면 쉽게 추출 가능!
✔ HTML의 input[type="file"]에서 val()을 사용하여 파일명을 가져올 수 있음.
✔ 특정 확장자만 허용할 수도 있으며, .xls, .xlsx 외에는 업로드 차단 가능.
✔ 확장자가 없는 경우(noextension)를 대비하여 예외 처리가 필요함.

이제 jQuery를 활용해 파일 확장자를 쉽게 확인하고, 업로드 제한을 설정할 수 있다! 🚀