특정 확장자만 업로드 가능한 파일 첨부 폼 만들기 (doc, docx, hwp)

HTML 코드

<div class="row">
    <label class="label col col-2">파일첨부</label>
    <section class="col col-8">
        <label for="file1" class="input input-file">
            <div class="button">
                <input type="file" id="file1" name="file1" onchange="validateFile(this);">찾아보기
            </div>
        </label>
    </section>
</div>

위 코드는 사용자가 파일을 업로드할 수 있는 UI이다.

파일을 선택하면 onchange="validateFile(this)"가 실행되어 유효성 검사를 하게 된다.

옆에 있는 텍스트 박스는 선택한 파일명을 보여주기 위한 용도다.

 

 

JavaScript 코드

<script>
function validateFile(input) {
    const file = input.files[0];
    if (!file) return;

    const allowedExtensions = ['doc', 'docx', 'hwp'];
    const fileName = file.name;
    const fileExt = fileName.split('.').pop().toLowerCase();

    if (!allowedExtensions.includes(fileExt)) {
        alert("허용된 파일 형식이 아닙니다. (doc, docx, hwp만 가능)");
        input.value = ""; // 파일 초기화
        input.closest('.input-file').querySelector('input[type="text"]').value = ""; // 미리보기 초기화
        return;
    }

    // 파일 이름을 미리보기 필드에 표시
    input.closest('.input-file').querySelector('input[type="text"]').value = fileName;
}
</script>

 

 

코드 설명

• input.files[0]: 사용자가 업로드한 파일 객체를 가져온다.
• file.name.split('.').pop().toLowerCase(): 확장자를 추출하고 소문자로 변환한다.
• allowedExtensions.includes(fileExt): 내가 설정한 허용된 확장자인지 확인한다.
• 확장자가 다를 경우:
  • alert()로 사용자에게 안내하고
  • input.value = ""로 파일 선택을 초기화한다. 또한 미리보기 필드(previewPath1)도 초기화한다.
• 올바른 확장자인 경우, 선택한 파일명을 미리보기 텍스트박스에 보여준다.

 

필요하다면 PDF,XLSX,이미지확장자(JPEG,JPG,PNG,GIF)등을 allowedExtensions 배열에 추가하여 확장이 가능하다.