이미지를 업로드 하기 전에 미리보고 싶은 경우가 있다
매번 base64 로 인코딩 하기도 번거로운데 좋은 함수가 있더라
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
이미지 표시 </br>
<img id="imageViewer" style="max-width: 300px">
</div>
<input type="file" id="imageTest"/>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#imageTest").change(function (event) {
// file 을 추가하거나 파일이 변경되면 감지
let file = event.target.files[0];
// file 이 있다면
if (file) {
let reader = new FileReader();
reader.onload = function (e) {
$("#imageViewer").attr("src", e.target.result);
};
reader.readAsDataURL(file);
}
});
});
</script>
</html>
FileReader 를 이용하여 선택한 이미지를 바로 변환시킨다
이미지가 아닌 경우 이미지가 나오지 않으니 중간에 검증 로직은 꼭 추가 해야 할것!
'개발 > JavaScript' 카테고리의 다른 글
| [JavaScript] 체크 된 행의 데이터 가져오기 (0) | 2025.02.23 |
|---|---|
| [JavaScript] CheckBox 전체 선택, 전체 해제 하기 (0) | 2025.02.23 |
| [JavaScript] jQuery 를 이용한 Enter key 적용하기 (0) | 2024.08.02 |
| [JavaScript] document.form.submit() 사용하기 (0) | 2024.07.10 |
| [JavaScript] setInterval() 함수 사용하기 (0) | 2023.07.30 |
댓글