블로그-V3. 프로필 사진 변경 UI

원래는 input에 file타입이여야 파일선택하며 탐색기 창이 뜨고 파일을 선택할 수 있었는데

이미지 사진을 클릭했을 때 파일을 선택할 수 있는 서비스를 만들어보자.

 

그 전에 user 모델에 profileImg 필드를 추가해준다.

@Column(nullable = true)
private String profileImg; // 실제로 이미지 경로

 

 

프로필 이미지를 클릭하면 파일 탐색기가 열리며 프로필 사진을 설정할 수 있어야한다.

 

<div class="d-flex justify-content-center">
    <img id="profile-img-btn" src="https://i1.sndcdn.com/avatars-000373392764-zp0p80-t500x500.jpg"
        class="my_profile_rounded_img_btn_lg">
    <form>
        <input id="profile-img-input" type="file" class="my_hidden" />
    </form>
</div>

 

profile-img-btn의 클릭메서드에는 내부에 ( )라는 인자가 있기 때문에

이 버튼을 클릭하면 안에 내용을 실행해! 라는 것이고,

profile-img-input의 클릭은 그냥 클릭하라는 메서드이다.

 

$("#profile-img-btn").click(() => {
    // 파일 업로드 실행
    $("#profile-img-input").click();
});

 

 

 

[출처]

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브
https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩