이미지파일 업로드

MVC로 나누어서 회원가입할 때 사진을 첨부하면, 로그인 후에 마이페이지로 넘어가고 마이페이지에서 프로필 이미지를 보여주는 코드를 짜보았다.

위는 join.jsp를 실행시키고 보여지는 화면이다.

아래는 위 화면을 보여주는 코드이다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var checkMid = false; // : 아이디 체크를 했는지 확인해주는 전역변수
	
	function check(){
		var mid = $('input[name="mid"]').val(); // 지역변수, 입력된 아이디 값 가져오기
		$.ajax({
			url: "checkMid", // 아이디 중복 검사 요청을 보낼 url
			method: "POST",
			data: { mid : mid }, // 서버로 보낼 데이터
			success: function(data){
				console.log("["+data+"]"); // flag, 서버로부터 받은 응답데이터 console창에 보여주기
				checkMid = data; // 값을 전역변수에 저장
				if(checkMid == 'true'){ //아이디 중복검사 
					$("#checkMsg").text("사용가능한 아이디입니다.").css('color','green');
				}
				else{
					$("#checkMsg").text("이미사용중인 아이디입니다.").css('color','red');
				}
			}
		});
	}

	// 아이디 입력값이 변경(change)될 때마다 중복검사 수행하는 로직
	$('input[name="mid"]').on('change',function(){
		if($(this).val() !== ''){ // 입력값이 있다면
			check(); // 중복검사 실시
		}
	});
	// 회원가입 폼 (joinForm) 제출 시 아이디 중복검사
	$('#joinForm').on('submit',function(){
		if(checkMid != 'true'){ // checkMid : 아이디 체크를 했는지 확인해주는 전역변수
			alert('아이디 중복검사를 완료해주세요!');// 만약 중복검사를 안 했다면 띄워주는 알랏창
			return false; //폼 제출 막기
		}
	});
});
</script>

<form action="join.do" id="joinForm" method="POST" enctype="multipart/form-data">
<table border="1">
	<tr>
	 <!-- 아이디 중복 검사 결과를 보여줄 영역 -->
		<td>아이디</td><td><input type="text" required name="mid">&nbsp;<span id="checkMsg"></span></td>
	</tr>
	<tr>
		<td>비밀번호</td><td><input type="password" required name="password"></td>
	</tr>
	<tr>
		<td>비밀번호 확인</td><td><input type="password" required></td>
	</tr>
	<tr>
		<td>이름</td><td><input type="text" required name="name"></td>
	</tr>
	<tr>
		<td>프로필 이미지</td><td><input type="file" name="imagefile"></td>
	</tr>
	<tr>
		<td colspan="2" align="right"><input type="submit" value="회원가입"></td>
	</tr>
</table>
</form>

<hr>

<a href="main.do">메인으로 이동</a>

</body>
</html>

js를 이용해서 비동기 방식으로 데이터를 교환하기 위해 ajax를 사용했다.

자세한 설명은 주석을 보면 될 것 같다.

로그인 페이지, 회원가입 페이지와 같은 코드는 많이 짜봤는데, 파일 업로드를 하고 그 파일을 db에 저장하는 코드는 처음 구현해보았다.

파일을 db에 저장하기 위해서는 MVC 패턴으로 생각해본다면 V 에서 사용자가 업로드한 파일을 C에 보내고, C는 그 받아온 파일을 M에 보내면, 저장이 되는 것이다.

일단, 회원가입을 하고, 보여질 마이페이지 화면은 이렇다.

위 사진은 내가 업로드한 파일이고, 아이디와 이름은 내가 회원가입을 할 때 적었던 데이터의 내용이다.

위 화면의 코드는 아래와 같다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마이페이지</title>
</head>
<body>

<!-- C에서 데이터 가져오기 -->
<img alt="${data.name}님의 프로필 이미지" src="images/${data.imagepath}">
<ul>
	<li>아이디 >> ${data.mid}</li>
	<li>이름 >> ${data.name}</li>
</ul>

<hr>

<a href="main.do">메인으로 이동</a>

</body>
</html>

아래는 Controller의 코드들이다.

회원가입을 처리하기 위한 JoinAction.java이다.

package controller.member;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.nio.file.Paths;

import controller.common.Action;
import controller.common.ActionForward;
import jakarta.servlet.annotation.MultipartConfig;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import jakarta.servlet.http.Part;
import model.dao.MemberDAO;
import model.dto.MemberDTO;


// 파일 업로드를 처리할 수 있도록 설정하는 어노테이션
@MultipartConfig
//메서드 강제 오버라이딩을 위해 Action 인터페이스를 구현
public class JoinAction implements Action {

	// 기본 이미지 경로
	private final static String DEFAULTIMAGEPATH="default.jpg";
	// 이미지 디렉토리 경로 상수
	private final static String PATH="C:\\YN\\workspace02\\day039\\src\\main\\webapp\\images\\";

	
	// 요청을 처리하고 ActionForward 객체를 반환하는 execute 메서드
	// implements Action
	@Override
	// 회원가입 요청을 처리하기 위한 메서드
	public ActionForward execute(HttpServletRequest request, HttpServletResponse response) {
		// 사용자가 입력한 정보를 추출
		String mid=request.getParameter("mid");
		String password=request.getParameter("password");
		String name=request.getParameter("name");
		// 기본 이미지 경로 설정
		String imagepath=DEFAULTIMAGEPATH;

		// db에 저장하기 위해 객체 생성
		MemberDAO memberDAO=new MemberDAO();
		MemberDTO memberDTO=new MemberDTO();
		// V에서 받아온 값 객체에 저장
		memberDTO.setMid(mid);
		memberDTO.setPassword(password);
		memberDTO.setName(name);
		memberDTO.setImagepath(imagepath);

		// 파일 업로드 처리를 위한 part 객체 선언
		Part file=null; //초기화
		try {
			// V에서 사용자로부터 받아온 이미지파일 추출
			file=request.getPart("imagefile");
		} catch (Exception e) {
			e.printStackTrace();
		}
		// 업로드된 파일 이름 추출
		imagepath=Paths.get(file.getSubmittedFileName()).getFileName().toString();
		if(!imagepath.isEmpty()) { // 사용자가 이미지를 등록했다면,
			System.out.println("로그 : 이미지 업로드 시작");

			// 이미지 업로드 로직
			File uploadFile=new File(new File(PATH), imagepath);
			try (InputStream input = file.getInputStream();
					FileOutputStream output = new FileOutputStream(uploadFile)) {
				byte[] buffer = new byte[1024]; // 파일 크기는 1024로 제한
				int length;
				// 파일을 버퍼 단위로 읽고 쓰기
				while ((length = input.read(buffer)) > 0) { // 읽은 바이트가 있다면
					// buffer 배열의 시작 인덱스 0에서부터 length까지 바이트를 파일에 기록
					output.write(buffer, 0, length);
				}
			}catch(Exception e) {
				e.printStackTrace();
			}

			// 이미지 경로를 memberDTO에 설정
			memberDTO.setImagepath(imagepath);

			System.out.println("로그 : 이미지 업로드 끝");
		}

		// 회원가입 flag
		boolean flag = memberDAO.insert(memberDTO);

		// 페이지 전환을 위한 ActionForward 객체 생성
		ActionForward forward = new ActionForward();
		// 페이지 이동을 하므로 true 반환
		forward.setRedirect(true);
		if(flag) {// 회원가입을 성공했다면
			// 메인 페이지로 이동
			forward.setPath("main.do");
		}
		else { // 실패했다면
			// 다시 회원가입 페이지로 이동
			forward.setPath("joinPage.do");
		}
		return forward;
	}

}

아이디 중복검사를 위한 CheckMid.java

package controller.async;

import java.io.IOException;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import model.dao.MemberDAO;
import model.dto.MemberDTO;

@WebServlet("/checkMid")
//아이디 중복검사를 위한 SERVLET 파일
public class CheckMid extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public CheckMid() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// V에서 mid 파라미터를 가져온다
		String mid = request.getParameter("mid");
		// 받아온 mid를 저장할 객체를 생성한다 (DB연동)
		MemberDAO memberDAO=new MemberDAO();
		MemberDTO memberDTO=new MemberDTO();
		// 컨디션값에 맞는 쿼리문을 불러온다 == 회원 조회를 위한 조건 설정
		memberDTO.setCondition("CHECKMID");
		// 쿼리문 안에 ? 부분(mid=?)에 V에서 받아온 값을 넣는다
		memberDTO.setMid(mid);
		// DAO의 SELECTONE 을 수행한다
		memberDTO = memberDAO.selectOne(memberDTO);
		// 중복 검사 FLAG
		boolean flag = false;
		// DTO(DB)에서 V에서 받아온 MID값이 없다면
		if(memberDTO == null){
			flag = true;
		}
		// FLAG 값을 V에게 출력(T/F)
		response.getWriter().print(flag);
	}
}

'웹' 카테고리의 다른 글

MVC 패턴으로 프로젝트 진행 시 유의사항 (1)	2024.09.03
[JSP, JavaScript] 네이버 로그인 API (0)	2024.08.30
핸들러 매핑, 싱글톤 패턴 (0)	2024.08.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

이미지파일 업로드

'웹' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역