위와 같이 이미지를 업로드하기 전 화면에서 미리 볼 수 있도록 해보자
jsp
<div class="checkout__input">
<div id="pic_view2" class="set-bg product__item__pic" data-setbg="/images/profile/ProfilePicture.png"><c:if test="${YN eq true}"><img id="pic_view" src="/images/profile/${mem.mem_id}/${mem.mem_pic}" style="height: 100%; overflow: hidden"></c:if></div>
<label for="mem_pic">사진 선택</label>
<input type="file" id="mem_pic" name="mem_pic" style="display: none; height: 100%; overflow: hidden">
</div>
JavaScript
$("#mem_pic").change(function (event) {
let file = event.target.files[0];
let reader = new FileReader();
if (${YN eq true}) {
reader.onload = function (e) {
$("#pic_view").attr('src', e.target.result);
}
} else {
$("#pic_view2").append('<img id="pic_view" src="" style="height: 100%; overflow: hidden"></<img>');
reader.onload = function (e) {
$("#pic_view").attr('src', e.target.result);
}
$("#pic_view2").attr("style", "");
}
reader.readAsDataURL(file);
});
<c:if test="${YN eq true}">
$("#pic_view2").attr("data-setbg", "");
</c:if>
event.target은 이벤트가 일어난 대상을 의미한다. 첨부한 이미지의 정보가 files 배열에 담기는데 files[0]에는 이름이 담겨있다.
https://log.designichthus.com/58
[jQuery] 다중업로드시 파일정보 다루기
each(); jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드
log.designichthus.com
reader.onload()는 읽기 동작이 성공적으로 완료되었을 때 발생한다.
readAsDataURL()은 file을 읽어온다.
https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL
FileReader.readAsDataURL() - Web API | MDN
readAsDataURL 메서드는 컨텐츠를 특정 Blob 이나 File에서 읽어 오는 역할을 합니다. 읽어오는 read 행위가 종료되는 경우에, readyState (en-US) 의 상태가 DONE이 되며, loadend (en-US) 이벤트가 트리거 됩니다.
developer.mozilla.org
change()는 id가 mem_pic에 변화가 생길 경우 이를 감지해 함수를 실행시킨다.
회원이 프로필 사진을 등록하면 폴더가 생성되고 그 안에 사진이 저장된다. YN은 이 폴더가 있는 지 확인하는 변수로 Controller에서 넘겨받고 폴더가 있다면 true, 없다면 false의 값을 가진다.
(pic_view2는 회원이 프로필 사진을 등록하지 않았을 때 사용할 기본 프로필 사진을 보여주는 영역이다. pic_view는 프로필 사진을 등록했을 때 그 사진을 보여주는 영역이다.)
회원이 프로필 사진을 등록하지 않은 상태이면, 기본 프로필 사진의 영역(pic_view2)을 숨기고 등록 프로필 사진의 영역(pic_view)을 추가해 여기에 이미지를 띄운다.
프로필 사진을 등록한 상태라면 pic_view가 이미 존재하니 여기에 이미지를 띄운다.
'웹개발 교육 > 프로젝트' 카테고리의 다른 글
jQuery 선택자 정리 (0) | 2022.12.15 |
---|---|
인텔리제이에서 DDL문 없이 테이블 수정하기 (0) | 2022.12.13 |
인텔리제이에서 DML문 작성 없이 데이터 변경하기 (0) | 2022.12.13 |
11. 25 기록 (0) | 2022.11.25 |
11. 24 기록 (0) | 2022.11.25 |