웹사이트 특히 게시글 관련으로 만들다보면 첨부파일에 따른 이미지 미리보기 기능이 필요합니다. 이번에는 간단하게 FileReader방식을 이용하여 이미지 미리보기를 구현하도록 하겠습니다.
알아야 할 것
FileReader
FileReader는 input 태그중 file타입 혹은 API 요청등으로 전달한 File 또는 Blob 객체를 편리하게 처리할 수 있는 객체입니다. 해당 객체는 사용자의 조작에 따른 이벤트 핸들러를 가지고 있습니다. 여기에서는 이벤트 핸들러를 표를 통하여 소개하려고 합니다.
| 이벤트 핸들러 | 설명 |
| onload | 읽기 동작이 성공적으로 완료 하였을때 발생한다 |
| onerror | 읽기 동작에 에러가 생길때 발생한다. |
| onabort | 읽기 동작이 중단될때 발생한다 |
| onloadstart | 읽기 동작이 실행될때 발생한다 |
| onloadend | 읽기 동작이 끝났을 때 발생한다 |
| onprogress | 읽기 동작을 하는 동안 호출한다 |
※ 이벤트 핸들러 : 먼저 웹 브라우저에서 사용자의 조작으로 일어나는 사건을 이벤트라고 합니다. 그리고 이벤트에 대하여 반응을 할 수 있는 것을 핸들러라 부릅니다.
익명함수
이벤트 핸들러를 동작할 때는 일반적으로 동작을 하기 위한 함수가 있어야 합니다. 익명함수를 사용하는 경우에 함수를 선언하는 경우 불필요한 시간 동안 메모리를 낭비하지 않습니다. 그리고 재사용을 하지 않고 일회성으로 끝이 나기 때문에 네이밍에 고민하지 않아도 됩니다. 아래는 사용했던 소스코드의 익명 함수 부분을 적어놓았습니다.
reader.onloadend = function () {
//익명함수 내용
console.log('RESULT', reader.result);
previewIMG.src = reader.result;
}
소스코드 및 결과
아래의 프로그램을 이용하여 이미지 미리보기 기능을 구현하였습니다.
See the Pen Image preview by kmsbio (@kmsbio) on CodePen.
<html>
<head>
<title>Base64를 이용한 이미지 인코딩</title>
</head>
<body>
<form>
<input type="file" name="IMGfile" accept="image/*" onchange="callIMG(this)">
</form>
<img id="encode" src="">
</body>
<script>
function callIMG(element) {
var previewIMG = document.getElementById("encode");
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function () {
console.log('RESULT', reader.result);
previewIMG.src = reader.result;
}
reader.readAsDataURL(file);
}
</script>
</html>'컴퓨터 > JavaScript' 카테고리의 다른 글
| JavaScript (5) - 서버 시간을 가져오자 (XMLHttpRequest) (0) | 2023.03.16 |
|---|---|
| JavaScript (3) - 텍스트를 인식하는 중복없는 뽑기제작 (0) | 2022.01.02 |
| JavaScript (2) - 상단 이동 스크롤 버튼 구현 (0) | 2021.01.29 |
| JavaScript (1) - 자바스크립트를 이용하여 시계 구현하기 (0) | 2020.12.14 |