FileReader()란?
FileReader는 웹 브라우저에서 제공하는 JavaScript API 객체로, 사용자가 선택한 파일을 자바 스크립트가 읽을 수 있는 형태로 변환하는 역할을 합니다.
참고 : https://developer.mozilla.org/en-US/docs/Web/API/FileReader
FileReader - Web APIs | MDN
FileReader() Returns a new FileReader object. See Using files from web applications for details and examples. Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface. Remove the event
developer.mozilla.org
다음은 Test 코드이다. 위부터 Html, Css, JavaScript 순
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<h2 class="h2text">이미지 넣기</h2>
<form>
<input id="input" type="file" name="IMGfile" accept="image/*">
</form>
<img id="img_result" style="max-width: 200px;">
<script src="./tsetjs.js"></script>
</body>
</html>
css
/* style.css */
/* 기본 스타일 초기화 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* 본문 전체 스타일 */
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
background-color: #f5f5f5;
padding: 50px 20px;
}
/* 제목 스타일 */
.h2text {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
/* 파일 입력 버튼 스타일 */
.img_input {
margin-bottom: 20px;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
transition: all 0.2s ease;
}
.img_input:hover {
border-color: #888;
background-color: #f0f0f0;
}
/* 이미지 미리보기 스타일 */
.img_reult {
max-width: 300px;
max-height: 300px;
border: 2px solid #ccc;
border-radius: 8px;
object-fit: cover;
display: block;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
JavaScript
document.getElementById('input').addEventListener('change', (e) => {
const fileReader = new FileReader(); // FileReader() 객체 생성
fileReader.readAsDataURL(e.target.files[0]); //
fileReader.onload = (e) => {
let base64data = fileReader.result;
document.getElementById('img_result').src = base64data;
}
})
사실 여기서 가장 중요한 내용은 JavaScript가 될 것이다.
때문에 해당 포스팅에선 JavaScript만 다루도록 하겠다.
여기서 가장 중점은
const fileReader = new FileReader(); // FileReader() 객체 생성
해당 내용이다 fileReader를 객체를 새롭게 선언하며 객체를 생성한다.
이벤트가 발생한 input 요소에서 사용자가 선택한 첫 번째 파일을 읽어 Base64 형식의 데이터 URL로 변환하여 FileReader에 처리하도록 하겠다
조금의 이해라도 돕기위해서 모든것을 짤라서 자세하게 설명해주겠다.
e = 이벤트 객체
e.target = 여기선 input의 타입이 file인 HTML의 12번째 줄이 될것이다.
e.target.files[0] = 선택한 첫 번째 파일
fileReader.readAsDataURL(...) = 괄호안의 파일을 Base64 데이터 URL 형태로 읽겠다는 의미이다.
fileReader.onload = (e) => { ... }는 위의 fileReader.readAsDataURL로 파일을 읽으면 비동기적으로 완료가 되고, onload 이벤트가 발생하게 된다. 이를 활용하여 fileReader.oload이벤트가 발생했을때 화살표 함수를 실행시키라는 뜻.
| base64data값에 fileReader.result를 저장하라는것이다. 1. let을 사용한 이유? => 사용자가 이미지를 바꿀수있기 때문에 지속적으로 값이 변하기 때문에 const보다 let이 적절하다. 2. result는 뭐에요? => result는 fileReader의 속성값이다. 위에서 fileReader에 Base64형식으로 데이터 URL을 저장한것을 기억할 것이다. 여기서 값이 fileReader의 값으로 저장되는것이 아닌 result라는 속성에 저장이 된다. 때문에 우리는 이러한 Base64형식으로 저장된 값을 가져오기 위해서는 속성값인 result를 불러와야 하는것이다. |
그러고 base64data에 저장된 값을 img_result의 id 값을 가진 img속성에 적용하면서 화면에 송출되는 것이다.
(src또한 img의 src속성이다. src속성은 데이터 URL을 지정할때 쓰는 속성)
'Front-End > JavaScript' 카테고리의 다른 글
| 동기식 vs 비동기식 (0) | 2026.02.03 |
|---|---|
| 404 페이지로 예외처리 (0) | 2026.02.03 |
| [개인블로그] - 글쓰기(Post) 버튼 구현 (0) | 2026.01.28 |
| JavaScript - 달력 구현 [버튼기능 최적화] (0) | 2026.01.11 |
| JavaScript - 달력 구현 [개인 블로그에 캘린더 넣기] (0) | 2026.01.06 |