HTML DOM의 FileUpload files 속성은 파일 업로드 버튼(<input type="file">)을 통해 사용자가 선택한 모든 파일 정보를 담고 있는 FileList 객체를 반환합니다. 이 속성을 활용하면 자바스크립트만으로 선택된 파일의 개수, 파일명 등 다양한 정보에 손쉽게 접근할 수 있습니다.
문법(Syntax)
files 속성의 기본 문법은 다음과 같습니다.
object.files
핵심 특징
- files 속성은 읽기 전용(read-only)이며, 항상 FileList 객체를 반환합니다.
- 파일을 하나도 선택하지 않으면 빈 FileList가 반환되며,
length값은 0이 됩니다. - 여러 개의 파일을 동시에 선택하려면 input 요소에
multiple속성을 반드시 추가해야 합니다. - 반환된 각 파일 객체(File)에서는
name,size,type등의 세부 정보도 확인할 수 있습니다.
예제(Example)
다음은 FileUpload files 속성을 활용한 실전 예제입니다. 파일을 여러 개 선택한 뒤 버튼을 클릭하면, 선택된 모든 파일의 이름이 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#52B2CF;
color:#fff;
}
.btn{
background-color:coral;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
display:block;
color:#fff;
outline:none;
}
.show{
font-size:1.2rem;
color:#fff;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM FileUpload files Property Example</h1>
<p>Select some files</p>
<input type="file" class="file-upload-btn" multiple>
<button onclick = "showFiles()" class = "btn">Click me to see all selected file</button>
<div class="show"></div>
<script>
function showFiles() {
var fileBtn = document.querySelector(".file-upload-btn");
var showMsg = document.querySelector(".show");
showMsg.innerHTML='';
if(fileBtn.files.length === 0){
showMsg.innerHTML = "Please select at least one file!!";
} else {
showMsg.innerHTML = "You selected these files:";
for(let i=0;i<fileBtn.files.length;i++) {
showMsg.innerHTML += '<p>' + fileBtn.files[i].name + '<p>';
}
}
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
여기서 "Click me to see all selected file" 버튼을 클릭하면, 파일 입력창에서 선택한 모든 파일의 이름이 아래와 같이 목록 형태로 출력됩니다.
정리
files 속성은 파일 업로드 기능을 구현할 때 가장 기본이 되는 API입니다. 예제 코드처럼 files.length로 선택 여부를 검증하고, 반복문으로 각 파일의 정보를 처리하면 업로드 전 유효성 검사나 미리보기 기능 등 다양한 확장 구현이 가능합니다.