테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

프로필 이미지 업로드 버튼을 눌렀을 때 올린 사진으로 프로필이 변경되게 하려면 어떻게 해야 할까요?

toto1234 2년 전 조회 3,227
답변 1
목록 

</p>

<p><!DOCTYPE html></p>

<p><html xmlns:th="<a href="http://www.thymeleaf.org">" target="_blank" rel="noopener noreferrer">http://www.thymeleaf.org"></a></p>

<p><head></p>

<p><meta charset="EUC-KR"></p>

<p><title>2023 MINI HOMEPAGE</title></p>

<p><link rel="stylesheet" href="../static/resources/css/font.css" /></p>

<p><link rel="stylesheet" href="../static/resources/css/layout.css" /></p>

<p><link rel="stylesheet" href="../static/resources/css/home.css" /></p>

<p><script src="<a href="https://code.jquery.com/jquery-3.7.0.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.0.min.js"></script></a></p>

<p></head></p>

<p><body></p>

<p><div></p>

<p><a href="/trip/"></p>

<p><img style="width: 160px" src="../static/resources/images/logo1.png"></p>

<p></a></p>

<p><div class="bookcover"></p>

<p><div class="bookdot"></p>

<p><div class="page"></p>

<p><div class="home"></p>

<p><div class="upside"></p>

<p>
</p>

<p><strong>&emsp;&emsp;&emsp;TODAY <span style="color:coral;">28</span> | TOTAL 234918</strong></p>

<p>&emsp;&emsp;&emsp; &emsp; <span class="title">BTeam의 잡동사니</span></p>

<p></div></p>

<p><div class="home_main"></p>

<p><div class="profile"></p>

<p><li class="nav-item cta" th:if="${session.sessionID == null}"></p>

<p><a th:href="@{/tripmember/memForm}" class="nav-link text-white" id="item2">로그인 / 회원가입</a></p>

<p></li></p>

<p><th:block th:unless="${session.sessionID == null}"></p>

<p><div class="profile_1"></p>

<p><div class="mfile"></p>

<p><div class="sum-img"></p>

<p><img th:src="@{'../static/resources/images/noimage.jpg'}" id="imgx" style="width: 200px; height: 200px;"></p>

<p></div></p>

<p><div class="sum-imgupbtn mb20"></p>

<p><input type="file" id="mfile" name="mfile"></p>

<p></div></p>

<p></div></p>

<p><button id="updateProfileButton">프로필 이미지 업로드</button></p>

<p><input type="text" name="mini_pro_nick" class="form-control" id="mini_pro_nick" th:value="${session.sessionNick}" readonly="readonly"></p>

<p></div></p>

<p><div class="profile_3"></p>

<p><div id="profileText"></p>

<p>

</p>

<p></div></p>

<p><div id="editProfile" style="display: none;"></p>

<p><textarea id="profileTextarea" style="width: 100%; height: 100px;"></textarea></p>

<p><button id="saveProfileButton">저장</button></p>

<p></div></p>

<p><button id="editProfileButton" onclick="toggleEditMode()">인사말 수정</button></p>

<p></div></p>

<p></th:block></p>

<p><div class="profile_3"></p>

<p><div class="profile-dropdown"></p>

<p><div class="dropdown-btn"></p>

<p><div class="dropdown-title">Related Link</div></p>

<p><div class="triangle-down"></div></p>

<p></div></p>

<p><div class="dropdown-content"></p>

<p><a href="/" target="_blank">Home</a></p>

<p><a href="<a href="https://naver.com"" target="_blank" rel="noopener noreferrer">https://naver.com"</a> target="_blank">Naver</a></p>

<p><a href="<a href="https://cafe.naver.com/kosmo132"" target="_blank" rel="noopener noreferrer">https://cafe.naver.com/kosmo132"</a> target="_blank">Kosmo132</a></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p><div class="home_contents"></p>

<p><div class="updated_news_title">
<strong>Updated news</strong></div></p>

<p><div class="updated_news_contents"></p>

<p><div class="updated_news_left"></p>

<p><span class="updated_news_left1"><span class="updated_news_red"> 사진첩 </span> 아기하마</span></p>

<p><span class="updated_news_left2"><span class="updated_news_blue"> 게시판 </span> 티벳토끼의 잡동사니입니다</span></p>

<p><span class="updated_news_left3"><span class="updated_news_blue"> 게시판 </span> 둘러보고 가세요~</span></p>

<p><span class="updated_news_left4"><span class="updated_news_red"> 사진첩 </span> 아빠가 왕도마뱀이면?</span></p>

<p></div></p>

<p><div class="updated_news_right"></p>

<p><a th:href="@{/mdiaryList}"></p>

<p><div class="updated_news_right1">다이어리 <span class="updated_news_right_number">0/25</span></a></p>

<p>&emsp;&emsp;&emsp;&emsp;사진첩 <span class="updated_news_right_number">0/25</span></div></p>

<p><div class="updated_news_right2">게시판 <span class="updated_news_right_number">0/25</span></p>

<p>&emsp;&emsp;&emsp;&emsp;&emsp;방명록 <span class="updated_news_right_number">0/25</span></div></p>

<p><div class="updated_news_right3"></div></p>

<p></div></p>

<p></div></p>

<p><div class="miniroom_title">
<strong>Miniroom</strong></div></p>

<p><div class="miniroom_contents"></p>

<p><img class="miniroom_gif" th:src="@{'../static/resources/images/aa1.gif'}"></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p><div class="menu_bar"></p>

<p><a th:href="@{/mdiaryhome}" class="menu_button1">  홈</a></p>

<p><a th:href="@{/mdiaryList}" class="menu_button2">  다이어리</a></p>

<p><a th:href="@{/mphotoList}" class="menu_button3">  사진첩</a></p>

<p><a th:href="@{/mcalList}" class="menu_button4">  캘린더</a></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p></div></p>

<p><script></p>

<p>/*<![CDATA[*/</p>

<p> </p>

<p>// Thumbnail image preview</p>

<p>function readURL(input) {</p>

<p>if (input.files && input.files[0]) {</p>

<p>var reader = new FileReader();</p>

<p>reader.onload = function(e) {</p>

<p>$('#imgx').attr('src', e.target.result);</p>

<p>}</p>

<p>reader.readAsDataURL(input.files[0]);</p>

<p>}</p>

<p>}</p>

<p>$(function() {</p>

<p>$('#mfile').change(function() {</p>

<p>if ($(this).val().length > 0) {</p>

<p>readURL(this);</p>

<p>} else {</p>

<p>console.log("No image selected");</p>

<p>}</p>

<p>});</p>

<p>});</p>

<p> </p>

<p>// Toggle edit mode for profile text</p>

<p>function toggleEditMode() {</p>

<p>const profileText = document.getElementById('profileText');</p>

<p>const editProfile = document.getElementById('editProfile');</p>

<p>const editProfileButton = document.getElementById('editProfileButton');</p>

<p>const profileTextarea = document.getElementById('profileTextarea');</p>

<p> </p>

<p>if (editProfile.style.display === 'none') {</p>

<p>editProfile.style.display = 'block';</p>

<p>profileText.style.display = 'none';</p>

<p>editProfileButton.style.display = 'none';</p>

<p>profileTextarea.value = profileText.textContent;</p>

<p>} else {</p>

<p>editProfile.style.display = 'none';</p>

<p>profileText.style.display = 'block';</p>

<p>editProfileButton.style.display = 'block';</p>

<p>}</p>

<p>}</p>

<p> </p>

<p>document.getElementById('saveProfileButton').addEventListener('click', function() {</p>

<p>const profileText = document.getElementById('profileText');</p>

<p>const profileTextarea = document.getElementById('profileTextarea');</p>

<p> </p>

<p>profileText.textContent = profileTextarea.value;</p>

<p>toggleEditMode();</p>

<p>});</p>

<p> </p>

<p>/*]]>*/</p>

<p></script></p>

<p><script></p>

<p>$(function() {</p>

<p>$('#updateProfileButton').click(function() {</p>

<p>const mini_pro_nick = $('#mini_pro_nick').val();</p>

<p>const formData = new FormData();</p>

<p>formData.append('mini_pro_nick', mini_pro_nick);</p>

<p>formData.append('mfile', $('#mfile')[0].files[0]);</p>

<p> </p>

<p>$.ajax({</p>

<p>type: 'POST',</p>

<p>url: '/trip/mini/mproInsert',</p>

<p>data: formData,</p>

<p>processData: false,</p>

<p>contentType: false,</p>

<p>success: function(data) {</p>

<p>console.log('통신 성공: ' + data);</p>

<p>// You can perform any additional actions here after successful upload</p>

<p>},</p>

<p>error: function() {</p>

<p>console.log('통신 실패');</p>

<p>}</p>

<p>});</p>

<p>});</p>

<p>});</p>

<p></script></p>

<p></body></p>

<p></html></p>

<p>

 

여기서 사진을 올리면 적용이 되어야 하는데 새로고침을 누르면 바로 사라지는데 어떻게 해야 할까요?

#html5 #css3 #spring #javascript #ajax
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

웅푸
웅푸
2년 전

서버로 업데이트 하는부분을 추가 해줘야할듯 합니다.

if (editProfile.style.display === 'none') {
editProfile.style.display = 'block';
profileText.style.display = 'none';
editProfileButton.style.display = 'none';
profileTextarea.value = profileText.textContent;
} else {
editProfile.style.display = 'none';
profileText.style.display = 'block';
editProfileButton.style.display = 'block';


$.ajax({
    type: 'POST',
    url: '/updateProfile', 
    data: { profileText: profileTextarea.value }, 
    success: function(data) {
   },
    error: function() {
   }
});

}
}
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인