고정 헤더 영역
상세 컨텐츠
본문
반응형
FileReader는 JavaScript에서 제공하는 Web API 중 하나로, 파일 시스템의 내용을 비동기적으로 읽기 위한 객체입니다. 이 객체는 파일을 읽고 처리하는 다양한 방법을 제공합니다. 주로 파일 업로드 기능에서 사용됩니다
- 파일 내용 읽기: 텍스트 파일의 내용을 읽거나, 이미지 파일을 Base64 인코딩 문자열로 읽는 등.
- 파일 정보 추출: 파일의 타입, 이름, 크기 등의 메타데이터를 추출.
- 비동기 처리: 파일 읽기가 비동기적으로 이루어지므로, 큰 파일도 UI를 멈추지 않고 처리 가능.
주요 메서드
- readAsText(file): 파일을 텍스트로 읽음.
- readAsDataURL(file): 파일을 Base64 인코딩된 URL로 읽음. 주로 이미지 파일에 사용.
- readAsArrayBuffer(file): 파일을 ArrayBuffer로 읽음.
- readAsBinaryString(file): 파일을 이진 문자열로 읽음 (현대 브라우저에서는 잘 사용되지 않음).
이벤트 핸들러
- onload: 파일 읽기가 성공적으로 완료되었을 때 실행.( 로딩이 완료됐을때 reader.result에 base64 string 이 담겨있음)
- onerror: 파일 읽기 중 오류가 발생했을 때 실행.
- onprogress: 파일 읽기 진행 상태를 모니터링.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FileReader Image Example</title>
</head>
<body>
<input type="file" id="fileInput">
<img id="preview" src="" alt="Image preview" style="display:none; max-width: 300px;">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file && file.type.match('image.*')) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('preview');
img.src = e.target.result;
img.style.display = 'block';
};
reader.onerror = function(e) {
console.error('Error reading file', e);
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| TextDecoder() (1) | 2024.06.14 |
|---|---|
| ArrayBuffer, TypedArray, Int8Array, Unit8Array (2) | 2024.06.14 |
| get() set() - class (1) | 2024.06.14 |
| @ 스코프 팩키지 - npm (1) | 2024.06.07 |
| toString() - JavaScript (0) | 2024.06.03 |
