HTML DOM FileUpload name 속성 완벽 정리

HTML DOM의 FileUpload name 속성은 파일 업로드(input type="file") 요소의 name 속성 값을 가져오거나 수정할 때 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 파일 입력 필드의 이름을 동적으로 변경할 수 있습니다.

문법(Syntax)

FileUpload name 속성의 기본 문법은 다음과 같습니다.

1. name 값 가져오기

object.name

2. name 값 설정하기

object.name = "text"

예제(Example)

아래는 FileUpload name 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 파일 입력 요소의 기존 name 값을 화면에 표시한 뒤, 새로운 값으로 변경합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM name Property</title>
<style>
    body{
        background-color:#397367;
        color:#fff;
        padding:20px;
    }
    .btn{
        display:block;
        background-color:#22223B;
        color:#fff;
        border:none;
        padding:0.5rem;
        border-radius:50px;
        width:80%;
        margin:10px;
    }
    .show-name{
        font-weight:bold;
        font-size:1.4rem;
        color:#fff;
    }
</style>
</head>
<body>
<h1>FileUpload name Property Example</h1>
<input type="file" name="My_Name">
<button onclick="setName()" class="btn">클릭하여 파일 입력 요소의 name 속성값 변경하기</button>
<div class="show-name"></div>
<script>
    function setName() {
        var chooseFileBtn= document.querySelector("input");
        document.querySelector(".show-name").innerHTML ="이전 Name = " + chooseFileBtn.name + "";
        chooseFileBtn.name = "My_New_Name";
        document.querySelector(".show-name").innerHTML +="새 Name = " + chooseFileBtn.name + "";
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM FileUpload name 속성 완벽 정리 – 문법과 예제 코드

개발자 도구의 "요소 검사(Inspect Element)" 기능으로 확인한 초기 상태입니다.

HTML DOM FileUpload name 속성 완벽 정리 – 문법과 예제 코드

이제 파란색 버튼을 클릭하면 파일 업로드 입력 요소의 name 속성값이 변경됩니다.

HTML DOM FileUpload name 속성 완벽 정리 – 문법과 예제 코드

버튼 클릭 후 "요소 검사"를 다시 확인하면 아래와 같이 name 속성이 My_New_Name으로 바뀐 것을 볼 수 있습니다.

HTML DOM FileUpload name 속성 완벽 정리 – 문법과 예제 코드

정리

FileUpload name 속성은 읽기와 쓰기가 모두 가능하며, 폼 데이터를 서버로 전송할 때 해당 파일 입력 필드를 식별하는 중요한 역할을 합니다. 자바스크립트로 동적으로 name 값을 제어하면 조건에 따라 유연하게 폼 구조를 변경할 수 있다는 점에서 유용하게 활용됩니다.