File API
안전한 클라이언트 사이드 파일 제어
File API는 웹 애플리케이션이 유저의 로컬 파일 시스템에 있는 파일을 읽을 수 있도록 해주는 표준 인터페이스입니다.
서버에 파일을 업로드하기 전에 클라이언트(브라우저) 측에서 먼저 파일을 가로채어, 이미지 미리보기를 제공하거나 파일 크기/포맷을 검증하는 등 사용자 경험(UX)을 대폭 향상시킬 수 있습니다.
서버에 파일을 업로드하기 전에 클라이언트(브라우저) 측에서 먼저 파일을 가로채어, 이미지 미리보기를 제공하거나 파일 크기/포맷을 검증하는 등 사용자 경험(UX)을 대폭 향상시킬 수 있습니다.
1. "문서 수발실과 스캐너" (비유)
📦
File 객체 (택배 상자)
유저가 <input type="file">로 파일을 선택하면 전달받는 상자입니다. 상자 겉면의 송장(이름, 크기, 타입)만 읽을 수 있고, 아직 내용물은 볼 수 없습니다.
🖨️
FileReader (스캐너)
택배 상자를 뜯어 내용물을 브라우저가 이해할 수 있는 형태(텍스트, 이미지 URL 등)로 스캔해주는 기계입니다. 변환이 끝나면 onload 알림을 줍니다.
2. 파일 처리 파이프라인 (Diagram)
3. FileReader 핵심 메서드
| 메서드 (읽기 방식) | 설명 및 반환 결과 (e.target.result) |
|---|---|
readAsDataURL(file) |
파일을 Base64로 인코딩된 문자열 형태의 Data URL로 읽어옵니다. 주로 <img> 태그의 src 속성에 넣어 이미지 미리보기를 구현할 때 가장 많이 사용됩니다. |
readAsText(file) |
파일을 일반적인 텍스트(문자열)로 읽어옵니다. 텍스트 파일(txt)이나 CSV, JSON 파일을 클라이언트에서 파싱할 때 유용합니다. |
readAsArrayBuffer(file) |
파일을 바이너리 데이터 버퍼인 ArrayBuffer로 읽어옵니다. 오디오/비디오 파일을 자르거나 웹소켓을 통한 스트리밍 전송 등 저수준의 데이터 조작이 필요할 때 사용됩니다. |
<div class="file-app">
<div class="header">
<h2>이미지 업로드 및 미리보기</h2>
<p>서버 전송 없이 로컬에서 이미지를 읽어옵니다.</p>
</div>
<div class="upload-container">
<label for="fileInput" class="upload-btn">
<i class="ph-duotone ph-upload-simple"></i> 파일 선택하기
</label>
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<p class="file-info" id="fileInfo">선택된 파일이 없습니다.</p>
</div>
<div class="preview-container" id="previewContainer">
<div class="placeholder" id="placeholder">
<i class="ph-duotone ph-image"></i>
<p>이미지 미리보기 영역</p>
</div>
<img id="previewImage" src="" alt="미리보기" style="display: none;">
</div>
</div>