Travel Maker - 프로필사진 실시간 업로드

<div class="container">
    <!-- 사용자 프로필 사진이 있을 경우에만 사진을 보여줍니다 -->
    <% if (info.getUser_pic() !=null && !info.getUser_pic().isEmpty()) { %>
        <button id="deleteProfileBtn" class="button_test">프로필 사진
            삭제</button>
        <!-- 삭제 여부 확인-->
        <div id="confirmModal" style="display: none;">
            <div id="confirmModalContent">
                <span>정말 삭제하시겠습니까?</span>
                <form action="DeletepicCon.do" id="deleteProfileForm" method="post">
                    <!-- 필요한 경우 추가적인 폼 입력 요소를 추가하세요 -->
                    <input type="hidden" name="user_id" value="<%=user_id%>">
                </form>
                <div id="confirmBtnWrap">
                    <button id="confirmYesBtn" class="button_test">예 /</button>
                    <button id="confirmNoBtn" class="button_test">아니오</button>
                </div>
            </div>
        </div>
        <div class="profile">

            <!-- 프로필 사진 부분 -->
            <div class="profile-image">

                <img class="profile_test" src="img/<%=info.getUser_pic()%>" alt="Profile Picture">
                <% } %>


                    <!-- 프로필 사진 삭제 스크립트 -->
                    <script>
                        const deleteProfileBtn = document.getElementById('deleteProfileBtn');
                        const confirmModal = document.getElementById('confirmModal');
                        const confirmYesBtn = document.getElementById('confirmYesBtn');
                        const confirmNoBtn = document.getElementById('confirmNoBtn');

                        // 삭제 버튼 클릭 시 모달 창 보이기
                        deleteProfileBtn.addEventListener('click', function () {
                            confirmModal.style.display = 'block';
                        });

                        function handleProfilePicDeletion(result) {
                            if (result.success) {
                                alert("프로필 사진이 삭제되었습니다.");
                                location.reload(); // 페이지 새로고침
                            } else {
                                alert("프로필 사진 삭제에 실패했습니다.");
                            }
                        }

                        // 모달 창에서 "예" 버튼 클릭 시 프로필 사진 삭제 실행
                        confirmYesBtn.addEventListener('click', function () {
                            // 폼 요소를 가져옵니다.
                            const deleteProfileForm = document.getElementById('deleteProfileForm');

                            // DeletepicCon.do로 폼을 제출합니다.
                            deleteProfileForm.submit();

                            // 모달 창 닫기
                            confirmModal.style.display = 'none';
                        });

                        // 모달 창에서 "아니오" 버튼 클릭 시 모달 창 닫기
                        confirmNoBtn.addEventListener('click',
                            function () {
                                confirmModal.style.display = 'none';
                            });
                    </script>


                    <!-- 사용자 프로필 사진이 없을 경우에는 사진 업로드 기능을 보여줍니다 -->
                    <% if (info.getUser_pic()==null || info.getUser_pic().isEmpty()) { %>
                        <div class="profile">
                            <div class="profile-image">
                                <div class="upload_test">
                                    <form action="UploadpicCon.do" method="post" enctype="multipart/form-data">
                                        <input type="file" name="profileImage" id="profileImageInput" accept="image/*">
                                        <img id="uploadedImage" src="" alt="">
                                        <input type="hidden" name="user_id" value="<%=user_id%>" class="button_test">
                                        <input type="submit" value="프로필사진 업로드하기" class="button_test2" id="uploadButton">
                                    </form>
                                </div>
                                <% } %>
                            </div>

                            <!-- 프사 업로드 스크립트 -->

                            <script>
                                const profileImageInput = document.getElementById("profileImageInput");
                                const uploadedImage = document.getElementById("uploadedImage");
                                const uploadButton = document.getElementById("uploadButton");

                                // 업로드 버튼을 비활성화하는 함수
                                function disableUploadButton() {
                                    uploadButton.disabled = true;
                                    uploadButton.style.backgroundColor = "gray"; // 비활성화 시 배경색을 회색으로 설정
                                }

                                // 업로드 버튼을 활성화하는 함수
                                function enableUploadButton() {
                                    uploadButton.disabled = false;
                                    uploadButton.style.backgroundColor = "#5882FA"; // 활성화 시 배경색을 파란색으로 설정
                                }

                                profileImageInput.addEventListener("change", function () {
                                    const file = profileImageInput.files[0];
                                    const reader = new FileReader();
                                    // 사용자가 파일을 선택한 후에 "업로드하기" 버튼을 활성화합니다
                                    enableUploadButton();
                                    reader.addEventListener("load", function () {
                                        uploadedImage.setAttribute("src", reader.result);
                                        uploadedImage.style.display = "block";
                                        profileImageInput.style.display = "none";
                                    });
                                    if (file) {
                                        reader.readAsDataURL(file);
                                    }
                                });

                                disableUploadButton()

                            </script>


                        </div>
            </div>
        </div>
</div>

 

 

DeletepicCon

package controller;

import java.io.UnsupportedEncodingException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import command.Command;
import model.UserDAO;
import model.UserDTO;

@WebServlet("/DeletepicCon")
public class DeletepicCon implements Command {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) {
		
		System.out.println("딜리트 픽 컨트롤러");
		
		try {
			request.setCharacterEncoding("UTF-8");
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		UserDAO udao = new UserDAO();

		String user_id = request.getParameter("user_id");
		System.out.println("아이디 : " + user_id);

		int row = udao.deletePic(user_id);

		UserDTO info = udao.userInfo(user_id);

		String moveURL = "";
		if (row > 0) {
			System.out.println("삭제 성공");
			HttpSession session = request.getSession();
			session.setAttribute("info", info);
			moveURL = "MyPage_normal.jsp?delete_success=true";

		} else {
			System.out.println("삭제 실패");
			moveURL = "MyPage_normal.jsp";

		}

		return moveURL;
	}

}

 

 

 

UploadpicCon

package controller;

import java.io.IOException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

import command.Command;
import model.PicDTO;
import model.UserDAO;
import model.UserDTO;

@WebServlet("/UploadpicCon")
public class UploadpicCon implements Command {

	@Override
	public String execute(HttpServletRequest request, HttpServletResponse response) {

		System.out.println("업로드콘 진입");

		String savepath = request.getServletContext().getRealPath("img");
		System.out.println(savepath);

		int maxSize = 10 * 1024 * 1024;

		String encoding = "UTF-8";

		DefaultFileRenamePolicy rename = new DefaultFileRenamePolicy();

		MultipartRequest multi = null;
		try {
			multi = new MultipartRequest(request, savepath, maxSize, encoding, rename);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

		String user_id = multi.getParameter("user_id");
		String filename = multi.getFilesystemName("profileImage");

		System.out.println("user_id : " + user_id);
		System.out.println("filename : " + filename);

		UserDAO udao = new UserDAO();
		int row = udao.uploadPic(new PicDTO(filename, user_id));
		
		UserDTO info = udao.userInfo(user_id);
		String moveURL = "" ;

		if (row > 0) {
			System.out.println("업로드 성공");
			HttpSession session = request.getSession();
			session.setAttribute("info", info);
			moveURL = "MyPage_normal.jsp?upload_success=true";
		} else {
			System.out.println("업로드 실패");
			moveURL = "MyPage_normal.jsp";
		}
		

		return moveURL;
	}

}

 

 

DAO, Mapper

public int deletePic(String user_id) {
    SqlSession session = sqlSessionFactory.openSession(true);
    int row = session.update("deletePic", user_id);
    session.close();
    
    return row;		
}

public int uploadPic(PicDTO dto) {
    SqlSession session = sqlSessionFactory.openSession(true);
    int row = session.update("uploadPic", dto);
    System.out.println(row);
    session.close();
    
    return row;		
}


<update id="deletePic" parameterType="String">
    update user_info set user_pic = null where user_id = #{user_id}
</update>

<update id="uploadPic" parameterType="PicDTO">
    update user_info set user_pic = #{user_pic} where user_id=#{user_id}
</update>