📌 joinForm.jsp 사진 등록 부분 수정하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jsp3/src/main/webapp/view/member/joinForm.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<link rel="stylesheet" href="../../css/main.css">
<script type="text/javascript">
function check(f) {
if(f.id.value == '') {
alert("아이디를 입력하세요.")
f.id.focus()
return false //submit 버튼 클릭의 기능을 중지시키는 역할
}
if(f.pass.value == '') {
alert("비밀번호를 입력하세요.")
f.pass.focus()
return false
}
if(f.name.value == '') {
alert("이름을 입력하세요.")
f.name.focus()
return false
}
return true
}
function win_open() {
let op = "width=300,height=300,left=50,top=150"
open("memberimg","",op)
}
</script>
</head>
<body>
<%-- type="hidden" : 값은 존재. 화면 없음. 파라미터값으로 서버에 전달 --%>
<form action="join" method="post" name="f" onsubmit="return check(this)">
<input type="hidden" name="picture" value="">
<table>
<caption>회원 가입</caption>
<tr><td rowspan="4" align="center" valign="bottom">
<img src="" width="100" height="120" id="pic"><br>
<%-- javascript:win_open() <= 자바스크림트 파일로 실행해. 라는 뜻이 된다. --%>
<font size="1"><a href="javascript:win_open()">사진 등록</a>
</font></td>
<td>아이디</td>
<td><input type="text" name="id"></td>
</tr>
<tr><td>비밀번호</td>
<td><input type="password" name="pass"></td></tr>
<tr><td>이름</td>
<td><input type="text" name="name"></td></tr>
<tr><td>성별</td>
<td><input type="radio" name="gender" value="1" checked>남
<input type="radio" name="gender" value="2" checked>여</td></tr>
<tr><td>전화번호</td>
<td colspan="2"><input type="text" name="tel"></td></tr>
<tr><td>이메일</td>
<td colspan="2"><input type="text" name="email"></td></tr>
<tr><td colspan="3" align="center">
<input type="submit" value="회원가입">
<%-- type="reset" : 화면을 초기화면으로 설정. 입력된 내용 전부 초기화 --%>
<input type="reset" value="다시작성">
</td></tr>
</table>
</form>
</body>
</html>
📌 SiteMeshFilter.java 수정하기
sitemesh : 프레임워크. 화면의 공통 부분을 코딩한 jsp 페이지를 설정.
1.sitemesh-3.0.1.jar 파일을 /WEB-INF/lib/ 폴더(톰켓에서 쓸 수 있도록 미리 약속되어 있는 폴더)에 복사.
2.SiteMeshFilter 클래스 파일 코딩
- ConfigurableSiteMeshFilter 상속 받음 : sitemesh 설정을 위한 클래스
- addDecoratorPath : 화면의 공통 부분을 코딩한 jsp 파일 설정
/* : 모든 url 요청. jsp2/model1/member/loginForm.jsp
- addExcludedPath("/member/memberimg*") : url이 /member/memberimg로 시작하는 경우 layout.jsp 페이지 적용 안함.
3. layoyt.jsp 코딩
package sitemesh;
import javax.servlet.annotation.WebFilter;
import org.sitemesh.builder.SiteMeshFilterBuilder;
import org.sitemesh.config.ConfigurableSiteMeshFilter;
@WebFilter("/*")
public class SiteMeshFilter extends ConfigurableSiteMeshFilter {
@Override
protected void applyCustomConfiguration(SiteMeshFilterBuilder builder) {
builder.addDecoratorPath("/*","/layout/layout.jsp")
.addExcludedPath("/member/memberimg");
}
}
📌 memberimg.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jsp3/src/main/webapp/view/member/memberimg.jsp --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 사진등록</title>
</head>
<body>
<h3>사진 업로드</h3>
<form action="imgupload" method="post" enctype="multipart/form-data">
<input type="file" name="picture" id="imageFile" acceot="img/*">
<input type="submit" value="사진등록">
</form><br>
<img id="preview" src="">
</body>
</html>
📌 MemberController.java - 내용 추가
@RequestMapping("memberimg")
public String memberimg (HttpServletRequest request, HttpServletResponse response) {
return "/view/member/memberimg.jsp";
}
📌 imgupload
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- /jsp3/src/main/webapp/view/member/imgupload.jsp --%>
<script>
// opener <= joinForm.jsp
img = opener.document.querySelector("#pic"); //opener 윈도위의 id="pic"인 태그 선택
img.src="picture/${filename}";
// joinForm.jsp의 <input type="hidden" name="picture" value="">
//파라미터에 파일이름 설정 =>db에 저장
opener.document.f.picture.value="${filename}"
self.close()
</script>
📌 MemberController.java - 내용 추가
jsp2/imgupload.jsp의 내용 추가
1. 파일 업로드 : 업로드 위치 : /member/picture로 설정
2. 이미지 파일을 opener 페이지에 보이게 출력하기. 현재 페이지 닫음.
@RequestMapping("imgupload")
public String imgupload (HttpServletRequest request, HttpServletResponse response) {
//1. 파일 업로드 : 업로드 위치 : /member/picture로 설정
String path = getServletContext().getRealPath("/") + "/picture/"; // 파일 업로드 폴더 위치
File f = new File(path);
if(!f.exists()) f.mkdirs(); //폴더가 없다면 폴더 생성
String filename = null;
MultipartRequest multi = null;
try {
multi = new MultipartRequest(request, path,10*1024*1024, "utf-8"); //파일 업로드 완성
} catch (IOException e) {
e.printStackTrace();
}
filename = multi.getFilesystemName("picture");
request.setAttribute("filename", filename);
return "/view/member/imgupload.jsp";
}
'수업(국비지원) > JSP' 카테고리의 다른 글
| [JSP] MVC MODEL2 방식 - 비밀번호 변경(passwordForm) (0) | 2023.04.20 |
|---|---|
| [JSP] MVC MODEL2 방식 - 아이디찾기, 비밀번호 찾기(idForm,pwForm, id, pw) (0) | 2023.04.20 |
| [JSP] MVC MODEL2 방식 - 회원 정보(list) (0) | 2023.04.19 |
| [JSP] MVC MODEL2 방식 - 회원정보 삭제(deletForm) (0) | 2023.04.19 |
| [JSP] MVC MODEL2 방식 - 회원정보 수정(updateForm) (0) | 2023.04.19 |