이미지 미리보기

 

위와 같이 이미지를 업로드하기 전 화면에서 미리 볼 수 있도록 해보자

 

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] 다중업로드시 파일정보 다루기

 

reader.onload()는 읽기 동작이 성공적으로 완료되었을 때 발생한다.

 

readAsDataURL()은 file을 읽어온다.

https://developer.mozilla.org/ko/docs/Web/API/FileReader/readAsDataURL

FileReader.readAsDataURL() - Web API | MDN

 

 

change()는 id가 mem_pic에 변화가 생길 경우 이를 감지해  함수를 실행시킨다.

 

회원이 프로필 사진을 등록하면 폴더가 생성되고 그 안에 사진이 저장된다. YN은 이 폴더가 있는 지 확인하는 변수로 Controller에서 넘겨받고 폴더가 있다면 true, 없다면 false의 값을 가진다.

 

(pic_view2는 회원이 프로필 사진을 등록하지 않았을 때 사용할 기본 프로필 사진을 보여주는 영역이다. pic_view는 프로필 사진을 등록했을 때 그 사진을 보여주는 영역이다.)

 

회원이 프로필 사진을 등록하지 않은 상태이면, 기본 프로필 사진의 영역(pic_view2)을 숨기고 등록 프로필 사진의 영역(pic_view)을 추가해 여기에 이미지를 띄운다.

 

프로필 사진을 등록한 상태라면 pic_view가 이미 존재하니 여기에 이미지를 띄운다.