웹 브라우저 환경에서 File 객체와 FileReader API를 활용하면 사용자가 선택한 로컬 파일의 정보를 확인하고, 그 내용을 직접 읽어 들일 수 있습니다. 이 글에서는 HTML의 파일 입력 요소와 JavaScript를 연동해 파일 이름, 크기, 형식 등의 메타데이터를 표시하고, 텍스트 파일의 실제 내용까지 화면에 출력하는 예제를 살펴보겠습니다.
핵심 개념 정리
File 객체
<input type="file"> 요소를 통해 파일을 선택하면 해당 요소의 files 속성에 File 객체 배열이 담깁니다. 각 File 객체는 다음과 같은 유용한 속성을 제공합니다.
- name: 파일 이름
- size: 파일 크기(바이트 단위)
- type: 파일의 MIME 타입
FileReader 객체
FileReader는 비동기적으로 파일 내용을 읽는 API입니다. 주요 메서드와 이벤트 핸들러는 다음과 같습니다.
- readAsText(): 파일을 일반 텍스트로 읽습니다.
- onload: 파일 읽기가 성공적으로 완료되면 실행되며, result 속성에서 읽은 내용을 얻을 수 있습니다.
- onerror: 읽기 중 오류가 발생하면 실행되며, error 속성으로 오류 정보를 확인할 수 있습니다.
예제 코드
다음은 파일 선택 시 파일 정보와 내용을 화면에 출력하는 전체 코드입니다.
<!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,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>JavaScript의 File과 FileReader</h1>
<input type="file" accept="text/*" onchange="displayFile(this)" />
<div class="result"></div>
<br />
<div class="sample"></div>
<h3>위 버튼을 클릭해 파일을 선택하면 파일 정보가 표시됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
function displayFile(input) {
let file = input.files[0];
resEle.innerHTML += "파일 이름 = " + file.name + "<br>";
resEle.innerHTML += "파일 크기 = " + file.size + " bytes <br>";
resEle.innerHTML += "파일 형식 = " + file.type + "<br>";
var Reader = new FileReader();
Reader.readAsText(file);
Reader.onload = function () {
sampleEle.innerHTML += Reader.result;
};
Reader.onerror = function () {
sampleEle.innerHTML += Reader.error;
};
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'파일 선택' 버튼을 클릭하고 텍스트 파일을 하나 선택하면, 파일의 이름·크기·형식이 빨간색 영역에 표시되고, FileReader가 읽어 온 파일 본문이 아래쪽 영역에 함께 출력됩니다.
코드 작동 원리
- 사용자가 파일 입력 요소에서 파일을 선택하면 onchange 이벤트가 발생하고 displayFile 함수가 호출됩니다.
- input.files[0]으로 첫 번째 선택된 File 객체를 가져옵니다.
- 파일의 name, size, type 속성을 읽어 결과 영역에 출력합니다.
- 새로운 FileReader 인스턴스를 생성하고 readAsText() 메서드로 파일을 비동기적으로 읽습니다.
- 읽기가 완료되면 onload 핸들러에서 result 속성을 통해 파일 내용을 화면에 추가하고, 오류가 발생하면 onerror 핸들러가 오류 메시지를 표시합니다.
이처럼 File 객체와 FileReader API를 조합하면 별도의 서버 업로드 없이도 브라우저에서 즉시 파일 정보를 확인하고 내용을 처리할 수 있어, 미리보기 기능나 클라이언트 측 파일 검증 등에 널리 활용됩니다.