JavaScript File.name 속성 완벽 정리 – 파일 경로 없이 이름만 가져오는 방법

웹 애플리케이션을 개발하다 보면 사용자가 업로드한 파일의 이름을 확인해야 하는 경우가 매우 자주 있습니다. 이럴 때 유용하게 쓸 수 있는 것이 바로 File 객체의 name 속성입니다.

File Web API의 file.name 속성은 파일이 저장된 전체 경로를 제외하고 오직 파일 이름만 반환합니다. 예를 들어 C:/Users/user/document.pdf 경로에 있는 파일이라면 "document.pdf"라는 문자열만 얻게 됩니다.

File.name 속성의 특징

읽기 전용(Read-only): 값은 참조만 가능하며 직접 수정할 수 없습니다.
경로 미포함: 보안상의 이유로 브라우저는 로컬 파일의 전체 경로를 노출하지 않으며, 이름만 제공합니다.
문자열 타입: 항상 문자열 형태로 파일 이름을 반환합니다.

예제 코드

다음은 파일 입력 요소를 통해 업로드한 파일의 이름을 화면에 표시하는 전체 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript file.name 속성</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>위의 파일 입력창에서 파일을 선택하면 파일 이름이 표시됩니다.</h3>
<script>
    let resultEle = document.querySelector(".result");
    document
    .querySelector(".fileInput")
    .addEventListener("change", (event) => {
        resultEle.innerHTML += "파일 이름 = " + event.target.files[0].name;
    });
</script>
</body>
</html>

코드 설명

<input type="file"> 요소에 클래스명 fileInput을 지정합니다.
해당 요소에 change 이벤트 리스너를 등록하여, 사용자가 파일을 선택하는 순간 콜백 함수가 실행되도록 합니다.
이벤트 객체의 event.target.files[0].name을 통해 첫 번째 선택 파일의 이름에 접근합니다.
.result 영역의 HTML에 파일 이름을 추가하여 화면에 출력합니다.

실행 결과

'파일 선택' 버튼을 클릭한 후 임의의 파일을 선택하면 아래와 같이 해당 파일의 이름이 화면에 표시됩니다.

JavaScript File.name 속성 완벽 정리 – 파일 경로 없이 이름만 가져오는 방법

함께 알아두면 좋은 File 객체 속성

name 외에도 File 객체는 다양한 유용한 속성을 제공합니다.

size: 파일 크기를 바이트 단위로 반환합니다.
type: 파일의 MIME 타입(예: image/png)을 반환합니다.
lastModified: 파일이 마지막으로 수정된 시각을 타임스탬프(밀리초)로 반환합니다.

이러한 속성들을 조합하면 업로드 전 파일 유효성 검사(확장자, 크기 제한 등)를 손쉽게 구현할 수 있습니다.