티스토리 뷰
음식 사진을 등록할 때 파일 열기 버튼을 누르고 (깔끔한 파일 선택 버튼 만드는 방법은 전 글에 포스팅 하였습니다.^^)
사진을 등록하면 기본적으로 해당 화면에서 사진이 바로 보이지 않고 사진의 파일명만 보일 것이다.
등록한 사진을 등록자가 해당 화면에서 바로 확인할 수 있도록 구현하려면 어떻게 해야 할까?
자바스크립트를 이용하면 사진을 바로 확인 가능하도록 구현할 수 있다.
function setThumbnail(event) {
var reader = new FileReader();
reader.onload = function(event) {
var img = document.createElement("img");
img.setAttribute("src", event.target.result);
document.querySelector("div#image_container").appendChild(img);
img.style.width = "360px";
img.style.height = "300px";
};
reader.readAsDataURL(event.target.files[0]);
}
자바스크립트(javascript)에서 위의 함수를 이용해서 등록한 사진들을 바로 확인해볼 수 있도록 하는 코드를 짠 후에
<input type="file" id="file" name="file" accept="image/*" onchange="setThumbnail(event);" required/>
<div id="image_container"></div>
html에서 setThumbnail 함수를 적용시켜주었더니
해당 화면에서 등록한 사진을 등록자가 바로 확인할 수 있게 되었다!
프론트엔드 개발을 하면서 자바스크립트를 사용하여 구현하는 것이 가장 어려웠고, 지금도 가장 어렵다고 느끼는 부분이 자바스크립트인데 확실히 어려운 만큼 더욱 예쁘고 사용자에게 편리한 기능들을 구현할 수 있는 것 같다.
'FrontEnd' 카테고리의 다른 글
미디어쿼리 (media query)를 이용하여 반응형 웹 만들기 (0) | 2023.03.15 |
---|---|
html/css 깔끔한 파일선택 버튼 만들기 (1) | 2023.03.14 |
CSS 적용 오류, Indentation오류 해결하기 (0) | 2023.03.14 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 로그아웃
- SQLD
- 백준
- EnumType.ORDINAL
- 프론트엔드
- 로깅
- 자바 스프링
- elasticsearch
- SQL 레벨업
- JPA
- 웹 MVC
- 지연로딩
- 자바
- 웹MVC
- 커뮤니티
- 스프링 커뮤니티
- 준영속
- 스프링 북마크
- 스프링부트
- 파이썬
- 영속
- 다이나믹 프로그래밍
- 회원탈퇴
- DP
- 북마크
- 스프링
- SQL
- 백준 파이썬
- 비영속
- 인텔리제이
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
글 보관함