프로필 이미지 업로드 버튼을 눌렀을 때 올린 사진으로 프로필이 변경되게 하려면 어떻게 해야 할까요?
본문
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="EUC-KR">
<title>2023 MINI HOMEPAGE</title>
<link rel="stylesheet" href="../static/resources/css/font.css" />
<link rel="stylesheet" href="../static/resources/css/layout.css" />
<link rel="stylesheet" href="../static/resources/css/home.css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
<div>
<a href="/trip/">
<img style="width: 160px" src="../static/resources/images/logo1.png">
</a>
<div class="bookcover">
<div class="bookdot">
<div class="page">
<div class="home">
<div class="upside">
<br>
<strong> TODAY <span style="color:coral;">28</span> | TOTAL 234918</strong>
<span class="title">BTeam의 잡동사니</span>
</div>
<div class="home_main">
<div class="profile">
<li class="nav-item cta" th:if="${session.sessionID == null}">
<a th:href="@{/tripmember/memForm}" class="nav-link text-white" id="item2">로그인 / 회원가입</a>
</li>
<th:block th:unless="${session.sessionID == null}">
<div class="profile_1">
<div class="mfile">
<div class="sum-img">
<img th:src="@{'../static/resources/images/noimage.jpg'}" id="imgx" style="width: 200px; height: 200px;">
</div>
<div class="sum-imgupbtn mb20">
<input type="file" id="mfile" name="mfile">
</div>
</div>
<button id="updateProfileButton">프로필 이미지 업로드</button>
<input type="text" name="mini_pro_nick" class="form-control" id="mini_pro_nick" th:value="${session.sessionNick}" readonly="readonly">
</div>
<div class="profile_3">
<div id="profileText">
<br><br>
</div>
<div id="editProfile" style="display: none;">
<textarea id="profileTextarea" style="width: 100%; height: 100px;"></textarea>
<button id="saveProfileButton">저장</button>
</div>
<button id="editProfileButton" onclick="toggleEditMode()">인사말 수정</button>
</div>
</th:block>
<div class="profile_3">
<div class="profile-dropdown">
<div class="dropdown-btn">
<div class="dropdown-title">Related Link</div>
<div class="triangle-down"></div>
</div>
<div class="dropdown-content">
<a href="/" target="_blank">Home</a>
<a href="https://naver.com" target="_blank">Naver</a>
<a href="https://cafe.naver.com/kosmo132" target="_blank">Kosmo132</a>
</div>
</div>
</div>
</div>
<div class="home_contents">
<div class="updated_news_title"><br><strong>Updated news</strong></div>
<div class="updated_news_contents">
<div class="updated_news_left">
<span class="updated_news_left1"><span class="updated_news_red"> 사진첩 </span> 아기하마</span>
<span class="updated_news_left2"><span class="updated_news_blue"> 게시판 </span> 티벳토끼의 잡동사니입니다</span>
<span class="updated_news_left3"><span class="updated_news_blue"> 게시판 </span> 둘러보고 가세요~</span>
<span class="updated_news_left4"><span class="updated_news_red"> 사진첩 </span> 아빠가 왕도마뱀이면?</span>
</div>
<div class="updated_news_right">
<a th:href="@{/mdiaryList}">
<div class="updated_news_right1">다이어리 <span class="updated_news_right_number">0/25</span></a>
사진첩 <span class="updated_news_right_number">0/25</span></div>
<div class="updated_news_right2">게시판 <span class="updated_news_right_number">0/25</span>
방명록 <span class="updated_news_right_number">0/25</span></div>
<div class="updated_news_right3"></div>
</div>
</div>
<div class="miniroom_title"><br><strong>Miniroom</strong></div>
<div class="miniroom_contents">
<img class="miniroom_gif" th:src="@{'../static/resources/images/aa1.gif'}">
</div>
</div>
</div>
</div>
<div class="menu_bar">
<a th:href="@{/mdiaryhome}" class="menu_button1"> 홈</a>
<a th:href="@{/mdiaryList}" class="menu_button2"> 다이어리</a>
<a th:href="@{/mphotoList}" class="menu_button3"> 사진첩</a>
<a th:href="@{/mcalList}" class="menu_button4"> 캘린더</a>
</div>
</div>
</div>
</div>
</div>
<script>
/*<![CDATA[*/
// Thumbnail image preview
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgx').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(function() {
$('#mfile').change(function() {
if ($(this).val().length > 0) {
readURL(this);
} else {
console.log("No image selected");
}
});
});
// Toggle edit mode for profile text
function toggleEditMode() {
const profileText = document.getElementById('profileText');
const editProfile = document.getElementById('editProfile');
const editProfileButton = document.getElementById('editProfileButton');
const profileTextarea = document.getElementById('profileTextarea');
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';
}
}
document.getElementById('saveProfileButton').addEventListener('click', function() {
const profileText = document.getElementById('profileText');
const profileTextarea = document.getElementById('profileTextarea');
profileText.textContent = profileTextarea.value;
toggleEditMode();
});
/*]]>*/
</script>
<script>
$(function() {
$('#updateProfileButton').click(function() {
const mini_pro_nick = $('#mini_pro_nick').val();
const formData = new FormData();
formData.append('mini_pro_nick', mini_pro_nick);
formData.append('mfile', $('#mfile')[0].files[0]);
$.ajax({
type: 'POST',
url: '/trip/mini/mproInsert',
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log('통신 성공: ' + data);
// You can perform any additional actions here after successful upload
},
error: function() {
console.log('통신 실패');
}
});
});
});
</script>
</body>
</html>
여기서 사진을 올리면 적용이 되어야 하는데 새로고침을 누르면 바로 사라지는데 어떻게 해야 할까요?
답변 1
서버로 업데이트 하는부분을 추가 해줘야할듯 합니다.
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() {
}
});
}
}
답변을 작성하시기 전에 로그인 해주세요.