DeseoDeSeo
[Spring] 파일 업로드 및 프로필 사진 출력하기 본문
홈페이지 화면에서 이렇게 프로필 사진이 출력되도록 함.
파일 업로드
header.jsp
<li><a href="${contextPath}/imageform.do"><span class="glyphicon glyphicon-picture">프로필사진등록 </span> </a></li>
MemberController.java
MultiRequest는 파일업로드를 직접적을 담당하는 클래스, 파일 업로드를 담당하는 생성자 및 여러 메서드를 포함하고 있다.
하단의 링크에서 복사해서 pom.xml에 붙여 넣음.
https://mvnrepository.com/artifact/servlets.com/cos/05Nov2002
@RequestMapping("/imageform.do")
public String imageForm() {
return"member/imageForm";
}
@RequestMapping("/imageUpdate.do")
public String imageUpdate(HttpServletRequest request, HttpSession session, RedirectAttributes rttr) {
//파일 업로드를 할 수 있게 도와주는 객체 필요.(cos.jar안에 있음)
//파일 업로드를 할 수 있게 도와주는 MultipartRequest 객체를 생성하기 위해서는
// 5개의 정보가 필요하다.
// 요청 데이터, 저장경로, 최대 크기, 인코딩, 파일명 중복제거
MultipartRequest multi = null;
//저장경로
String savePath = request.getRealPath("resources/upload");
//이미지 최대크기
int fileMaxSize = 10*1024*1024;
//1.기본 해당 프로필 이미지 삭제
// - 내가 현재 로그인 한 사람의 프로필 값을 가져와야함.
String memID = ((Member)session.getAttribute("mvo")).getMemID();
//getMember메서드는 memID와 일치하는 회원의 정보(Member)를가져온다.
String oldImg =mapper.getMember(memID).getMemProfile();
//기존의 프로필 사진 삭제
//해당 경로안에 파일을 가져오겠다.
File oldFile = new File(savePath+"/"+oldImg);
if(oldFile.exists()) {
oldFile.delete();
}
//객체 생성
try {
multi =new MultipartRequest(request,savePath, fileMaxSize, "UTF-8", new DefaultFileRenamePolicy() );
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//내가 업로드한 파일 가져오기
File file = multi.getFile("memProfile");
//멤버 프로파일로 보냄. 객체 생성 후
if(file != null) {
//업로드가 된 상태
//System.out.println(file.getName());
String ext = file.getName().substring(file.getName().lastIndexOf(".")+1);
ext=ext.toUpperCase();
if(!(ext.equals("PNG") ||ext.equals("GIF")||ext.equals("JPG"))) {
if(file.exists()) {
file.delete();
rttr.addFlashAttribute("msgType", "실패메세지");
rttr.addFlashAttribute("msg", "이미지 파일만 가능합니다.");
return "redirect:/imageForm.do";
}
}
}
}imageForm.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix ="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="contextPath" value ="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<jsp:include page="../common/header.jsp"></jsp:include>
<h2>Spring MVC03</h2>
<div class="panel panel-default">
<div class="panel-heading">Board</div>
<div class="panel-body">
<form action="${contextPath}/imageUpdate.do" method="post" enctype="multipart/form-data">
<table style ="text-align:center; border: 1px solid #dddddd " class="table table-borded">
<tr>
<td style="width:110px; vertical-align:middle;">아이디</td>
<td>${mvo.memID}</td>
</tr>
<tr>
<td style="width:110px; vertical-align:middle;">사진 업로드</td>
<td>
<span class="btn btn-default">
이미지를 업로드하세요.
<input type="file" name="memProfile">
</span>
</td>
</tr>
<tr>
<td colspan ="2">
<span id="passMessage" style="color:red;"></span>
<input type="submit" class="btn btn-primary btn-sm pull-right" value="등록">
<input type="reset" class="btn btn-warning btn-sm pull-right" value="취소">
</td>
</tr>
</table>
</form>
</div>
<div class="panel-footer">스프링게시판-뇽뇽이</div>
</div>
</div>
<script type="text/javascript">
//html을 다 로딩할때 까지 기다리겠다.
$(document).ready(function(){
if(${not empty msgType}){
if(${msgType eq "실패메세지"}){
$("#messageType").attr("class","modal-content panel-warning");
}
$("#myMessage").modal("show");
}
});
</script>
</body>
</html>MemberMapper.java
public int profileUpdate(Member mvo);MemberMapper.xml
<update id="profileUpdate" parameterType="kr.spring.entity.Member">
UPDATE MEMBER SET MEMPROFILE=#{memProfile} WHERE MEMID =#{memID}
</update>
프로필 사진 페이지에 출력하기
header.jsp
<c:if test="${empty mvo}">
<ul class="nav navbar-nav navbar-right">
<li><a href="${contextPath}/loginForm.do"><span class="glyphicon glyphicon-globe"> 로그인</span> </a></li>
<li><a href="${contextPath}/joinForm.do"> 회원가입 </a></li>
</ul>
</c:if>
<c:if test="${not empty mvo}">
<ul class="nav navbar-nav navbar-right">
<li>
<c:if test="${mvo.memProfile ne ''}">
<img class="img-circle"style="width:50px; height:50px;"src="${contextPath}/resources/upload/${mvo.memProfile}">
${mvo.memName}님 welcome.
</c:if>
<c:if test="${mvo.memProfile eq ''}">
<img class="img-circle"style="width:50px; height:50px;"src="${contextPath}/resources/images/default.jpg">
${mvo.memName}님 welcome.
</c:if>
</li>
<li><a href="${contextPath}/updateForm.do"> <span class="glyphicon glyphicon-heart ">회원정보수정</span> </a></li>
<li><a href="${contextPath}/imageform.do"><span class="glyphicon glyphicon-picture">프로필사진등록 </span> </a></li>
<li><a href="${contextPath}/logout.do"> <span class="glyphicon glyphicon-log-out">로그아웃</span> </a></li>
</ul>
<!--db에는 파일이름만 저장. 실제로는 resource폴더 안에 진짜 img를 저장. -->
</c:if>Membercontroller.java
// 업로드한 파일의 이름을 가져오는 코드
String newProfile = multi.getFilesystemName("memProfile");
Member mvo= new Member();
mvo.setMemID(memID);
mvo.setMemProfile(newProfile);
int cnt = mapper.profileUpdate(mvo);
//사진 업데이트 후 수정된 회원정보를 다시 가져와서 세션에 담기
Member m =mapper.getMember(memID);
session.setAttribute("mvo", m);
rttr.addFlashAttribute("msgType", "성공메세지");
rttr.addFlashAttribute("msg", "이미지 변경이 성공했습니다.");
return "redirect:/";MemberMapper.java
public Member getMember(String memID);MemberMapper.xml
<select id="getMember" parameterType="String" resultType="kr.spring.entity.Member">
SELECT * FROM MEMBER WHERE MEMID=#{memID}
</select>
'spring' 카테고리의 다른 글
| [Spring] MVC004 실습 세팅 (0) | 2023.09.21 |
|---|---|
| [Spring] 해당 글 작성자만 수정, 삭제 가능 기능 (0) | 2023.09.21 |
| [Spring] 회원정보 수정 및 메인 페이지에 탭 추가 (2) | 2023.09.19 |
| [Spring] 회원 가입 기능 마무리 및 로그인 기능 (1) | 2023.09.18 |
| [Spring] SpringMVC03_회원가입 폼, 아이디 중복 여부, 비밀번호 일치여부 (0) | 2023.09.15 |
'spring' Related Articles
more
