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

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

QA

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

본문


<!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() {
   }
});

}
}
답변을 작성하시기 전에 로그인 해주세요.
전체 23
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT