본문 바로가기
수업(국비지원)/JSP

[JSP] MVC MODEL1 방식 - 사진 등록(memberimg)

by byeolsub 2023. 4. 19.

📌 joinForm.jsp 내용 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- /jsp2/src/main/webapp/model1/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.jsp","",op)
      }
</script>
</head>
<body>
<%-- type="hidden" : 값은 존재. 화면 없음. 파라미터값으로 서버에 전달 --%>
<form action="join.jsp" 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>
        <font size="1"><a href="javascript:win_open()">사진 등록</a>bv 
        </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>

 

 

📌 memberimg.jsp 사진 등록

<%@ 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" 여야함.(절대 get 방식으로는 넘어 갈 수 없다.)
     
     imgupload.jsp 페이지는 file의 내용을 가지고 호출됨.
                           => request 객체로 파라미터 값, 파일의 내용을 구분 할 수 없음.
                              정보는 있지만 내용을 사용 할 수 없다.
                           => cos.jar 파일에 설정된 MultipartRequest 객체를 사용해야 함.
--%>
<form action="imgupload.jsp" 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>