반응형
해당 포스트는..
자바스크립트 활용을 위한 간단한 예제를 정리해두는 모음집입니다. 필요에 따라 추가될 수 있고, 추가되는 경우 해당 날짜를 기준으로 갱신됩니다.
이미지 미리보기 기능을 구현하는 방법
FileReader 객체를 사용하여 이미지 미리보기
FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.
참고로, File 객체는 <input> 태그를 이용하여 유저가 선택한 파일들의 결과로 반환된 FileList 객체, 드래그 앤 드랍으로 반환된 DataTransfer 객체 혹은 HTMLCanvasElement의 mozGetAsFile() API로 부터 얻을 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview using FileReader</title>
</head>
<body>
<input type="file" id="fileInput">
<img id="preview" alt="Image Preview" style="display: none;">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('preview');
img.src = e.target.result;
img.style.display = 'block';
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
See the Pen 이미지미리보기 by youngwan2 (@youngwan2) on CodePen.
URL.createObjectURL | 파일 객체를 가리키는 임시 객체를 생성
URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString(실제 문자열)으로 반환합니다. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 무효화됩니다.
만약에, 생성된 객체 URL을 해제하려면 revokeObjectURL()을 호출하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview using createObjectURL</title>
</head>
<body>
<input type="file" id="fileInput">
<img id="preview" alt="Image Preview" style="display: none;">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const img = document.getElementById('preview');
img.src = URL.createObjectURL(file);
img.style.display = 'block';
}
});
</script>
</body>
</html>
See the Pen Untitled by youngwan2 (@youngwan2) on CodePen.
반응형
'나만의 모음집' 카테고리의 다른 글
| certbot 인증서 관련 명령어 모음집 (0) | 2024.06.09 |
|---|---|
| 리액트의 다양한 활용 팁을 정리하였습니다. 모르셨다면 하나 알아가세요. (0) | 2024.05.20 |
| [모음집] NestJS(with TypeORM + PostgreSQL) 예제 모음집 (1) | 2024.05.17 |
| 나중에 참고할 수도 있는 코드 모음집 (0) | 2024.05.08 |
| [모음집] Zustand 모음집 (0) | 2024.05.06 |