수업(국비지원)/JSP
[JSP] MVC MODEL1 방식 - 이미지 업로드 구현, 이미지 수정(imgupload, img Update)
byeolsub
2023. 4. 19. 17:24
- enctype = "multipart/form-data" : 파일 업로드 시 필수 설정 부분
-> 파일 업로드 시 선택된 파일의 내용도 서버로 전송하도록 설정
-> type="file" 인 input 태그가 존재하면 설정 해야 함.
-> form 태그의 method = "post" 여야 함.
- imgupload.jsp 페이지는 file의 내용을 가지고 호출됨.
-> request 객체로 파라미터 값, 파일의 내용을 구분할 수 없음.
-> cos.jar 파일에 설정된 MultipartRequest 객체를 사용 해야 함.
- imgupload이미지 업로드 구현
📌
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jsp2/src/main/webapp/model1/member/memberimg.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원사진등록</title>
</head>
<body>
<h3>사진 업로드</h3>
<%--
enctype ="multipart/form-data" : 파일 업로드시 필수 설정 부분
=> 파일 업로드시 선택된 파일의 내용도 서버로 전송하도록 설정
=> type="file" 인 input 태그가 존재하면 설정해야함
=> form 태그의 method = "post" 여야함.
imgupload.jsp 페이지는 file의 내용을 가지고 호출됨.
=> request 객체로 파라미터값, 파일의 내용을 구분할 수 없음.
=> cos.jar 파일에 설정된 MultipartRequest 객체를 사용해야함.
--%>
<form action="imgupload.jsp" method="post" <%-- imgupload.jsp 로 구현--%>
enctype="multipart/form-data">
<input type = "file" name="picture" id="imageFile" accept="img/*">
<input type = "submit" value= "사진등록">
</form><br>
<img id="preview" src="">
</body>
</html>
💡
imgupload.jsp 페이지는 file의 내용을 가지고 호출됨.
=> request 객체로 파라미터 값, 파일의 내용을 구분할 수 없음.
=> cos.jar 파일에 설정된 MultipartRequest 객체를 사용 해야 함.
📌 imgupload.jsp 이미지업로드 구현부
<%-- /jsp2/src/main/webapp/model1/member/imgupload.jsp
1. 파일 업로드 : 업로드 위치 : model1/member.picture 로 설정.
2. 이미지 파일을 opener 페이지에 출력하기. 현재페이지 닫음.
--%>
<%@page import="java.io.File"%>
<%@page import="java.io.IOException"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. 파일 업로드
//uploadPath : 파일 업로드 되는 폴더이름
String uploadPath = application.getRealPath("/")+
"model1/member/picture/";
//파일이라는 객체 클래스 만듦.
//File : 파일의 정보를 관리하는 클래스. uploadPath라는 파일을 가져와서 관리한다는뜻.
File f = new File(uploadPath);
//f.exists() : f가 존재? !붙으면 존재하지않는다는 뜻.
//mkdirs(): 폴더생성
//폴더가 없으면 생성되도록 하는 구문.
if(!f.exists()) f.mkdirs();
String filename = null;
try {
/*
request : 요청정보.클라이언트에서 선택된 파라미터 정보,파일이름, 파일의 내용 등이 저장된 요청 객체.
uploadPath : 파일이 업로드 되는 폴더. 업로드 위치 폴더.
10*1024*1024: 최대 10M. 업로드 되는 파일의 최대 크기 설정.
"utf-8" : 파라미터가 있다면 인코딩 되도록 해주는 코드 설정.
*/
MultipartRequest multi = new MultipartRequest //파일 업로드
//MultipartRequest안의 객체들
(request,uploadPath,10*1024*1024,"utf-8");
//<input type="file" name ="picture"
filename = multi.getFilesystemName("picture"); //파일 이름
} catch (IOException e) {
e.printStackTrace();
}
%>
<%-- 2. 이미지 파일을 opener 페이지에 출력하기. 현재페이지 닫음. --%>
<script>
//opener 윈도우의 id="pic"인 태그를 선택.
//joinForm의 <img src="" width = "100" height="120" id="pic"> 부분.
img = opener.document.querySelector("#pic")
img.src="picture/<%=filename%>"
opener.document.f.picture.value="<%=filename%>"
self.close()
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
- img Update 이미지 수정
📌 updateForm.jsp
<%-- /jsp2/src/main/webapp/model1/member/updateForm.jsp
수정 전 기존의 회원정보를 화면에 출력하기
1. id 파라미터 조회. (변수에 만들어야 함)
2. login 정보 조회.
로그아웃 상태 : 로그인 하세요. 메세지 출력 후 loginForm.jsp페이지로 이동
3. login 정보 조회2.
관리자가 아니면서 다른 사람의 정보를 수정 하는 경우
: 본인 정보만 수정이 가능합니다. 메세지 출력후 main.jsp 페이지 이동
4. id 정보를 db 에서 읽어서 화면에 출력하기.
--%>
<%@page import="model.Member"%>
<%@page import="model.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//1. id 파라미터 조회
String id = request.getParameter("id");
//2. login 정보 조회
String login = (String)session.getAttribute("login"); //login : login된 아이디 정보 값.
if(login == null) { //로그아웃 상태 %>
<script type="text/javascript">
alert("로그인 하세요.")
location.href="loginForm.jsp"
</script>
<%-- 3. login 정보 조회2
로그인 상태. 관리자가 아니고 내 정보가 아닌경우. --%>
<% } else if(!login.equals("admin") && ! id.equals(login)) { %>
<script type="text/javascript">
alert("본인정보만 조회 가능합니다.")
location.href="main.jsp"
</script>
<%-- 관리자이거나, 본인정보인 경우. --%>
<% } else { //회원정보 조회해주는 부분.
//mem: db에서 id에 해당하는 정보를 읽어서 Member 객체로 저장
Member mem = new MemberDao().selectOne(id);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 정보 수정</title>
<link rel="stylesheet" href="../../css/main.css">
<script type="text/javascript">
function win_passchg() {
let op = "width=500,height=250,left=50,top=150"
open("passwordForm.jsp","",op)
}
function win_upload() {
let op = "width=300,height=300,left=50,top=150"
open("memberimg.jsp","",op)
}
</script>
</head>
<body>
<form action="update.jsp" name="f" method="post" onsubmit="return inputCheck(this)">
<input type="hidden" name="picture" value=<%=mem.getPicture() %>">
<table><caption>회원 정보 수정</caption>
<tr><td rowspan="4" valign="bottom">
<img src="picture/<%=mem.getPicture() %>" width="100" height="120" id="pic"><br>
<font size="1"><a href="javascript:win_upload()">사진수정</a></font>
</td><th>아이디</th>
<%-- readonly : 입력은 안되지만 파라미터로 이동은 가능함 --%>
<td><input type="text" name="id" readonly value="<%=mem.getId() %>">
</td></tr>
<tr><th>비밀번호</th><td><input type="password" name="pass"></td></tr>
<tr><th>이름</th>
<td><input type="text" name="name" value="<%=mem.getName() %>"></td></tr>
<tr><th>성별</th>
<td><input type="radio" name="gender" value="1" <%=mem.getGender()==1?"checkd":"" %>>남
<input type="radio" name="gender" value="1" <%=mem.getGender()==2?"checkd":"" %>>여</td></tr>
<tr><th>전화번호</th>
<td colspan="2"><input type="text" name="tel" value="<%=mem.getTel() %>"></td></tr>
<tr><th>이메일</th>
<td colspan="2"><input type="text" name="email" value=<%=mem.getEmail() %>"></td></tr>
<tr><td colspan="3"><input type="submit" value="회원수정">
<% if(login.equals(id)) {%>
<input type="button" value="비밀번호 수정" onclick="win_passchg()">
<% } %></td></tr>
</table>
</body>
</html>
<% } %>