HTML DOM FileUpload value 속성 – 파일 업로드 입력 값 가져오는 방법

HTML DOM FileUpload value 속성이란?

HTML DOM의 FileUpload value 속성은 파일 업로드(input type="file") 입력 버튼의 value 속성에 담긴 내용을 반환합니다. 사용자가 파일을 선택한 후 이 속성에 접근하면 선택된 파일의 경로 또는 파일 이름을 자바스크립트로 확인할 수 있습니다.

구문(Syntax)

value 속성의 기본 구문은 다음과 같습니다.

object.value

예제(Example)

다음은 FileUpload value 속성을 활용한 실제 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value 속성</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-value{
        font-weight:bold;
        font-size:1.4rem;
        color:#fff;
    }
</style>
</head>
<body>
<h1>FileUpload value 속성 예제</h1>
<p>파일을 선택해 주세요!</p>
<input type="file">
<button onclick="getValue()" class="btn">파일 업로드 버튼 값 가져오기</button>
<div class="show-value"></div>
<script>
    function getValue() {
        var chooseFileBtn= document.querySelector("input");
        document.querySelector(".show-value").innerHTML ="Value = " + chooseFileBtn.value;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM FileUpload value 속성 – 파일 업로드 입력 값 가져오는 방법

파일을 선택한 뒤 “파일 업로드 버튼 값 가져오기” 버튼을 클릭하면, 파일 업로드 입력 버튼의 value 속성 내용이 화면에 표시됩니다.

HTML DOM FileUpload value 속성 – 파일 업로드 입력 값 가져오는 방법

참고 사항

브라우저의 보안 정책에 따라 최신 브라우저에서는 사용자의 실제 로컬 파일 경로가 노출되지 않도록 value 속성이 C:\fakepath\파일이름 형태의 파일 이름만 반환합니다. 따라서 이 속성은 주로 사용자가 파일을 선택했는지 여부를 확인하거나, 선택된 파일명을 화면에 표시하는 용도로 활용하는 것이 좋습니다.