[실습] 음식 주문서 - 강사님 코드
Form JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>음식 주문</title>
<script type="text/javascript">
window.onload=function(){
const myForm = document.getElementById('myForm');
//폼 이벤트 연결
myForm.onsubmit=function(){
const items = document.querySelectorAll(
'input[type="number"]');
for(let i=0;i<items.length;i++){
if(items[i].value==''){
const label = document.querySelector(
'label[for="'+items[i].id+'"]');
alert(label.textContent + '의 수량을 입력하세요');
items[i].value = 0;
items[i].focus();
return false;
}//end of if
}//end of for
if(items[0].value==0 && items[1].value==0 &&
items[2].value==0){
alert('세 가지 음식 중 하나는 꼭 주문해야 합니다.');
return false;
}
};
};
</script>
</head>
<body>
<form action="s19_order.jsp" method="post" id="myForm">
<table>
<tr>
<td class="title">식사류</td>
<td>
<ul>
<li>
<label for="c0">짜장면</label>
<input type="number" name="food_c0"
id="c0" min="0" max="99" value="0">
</li>
<li>
<label for="c1">짬뽕</label>
<input type="number" name="food_c1"
id="c1" min="0" max="99" value="0">
</li>
<li>
<label for="c2">볶음밥</label>
<input type="number" name="food_c2"
id="c2" min="0" max="99" value="0">
</li>
</ul>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="전송">
</td>
</tr>
</table>
</form>
</body>
</html>View 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>
<%
int[] orderArray = {4000,5000,6000};
//POST방식으로 전송된 데이터 인코딩 타입 지정
request.setCharacterEncoding("utf-8");
int total = 0;
String orderName = "";
//짜장면
int food_c0 = Integer.parseInt(
request.getParameter("food_c0"));
//짬뽕
int food_c1 = Integer.parseInt(
request.getParameter("food_c1"));
//볶음밥
int food_c2 = Integer.parseInt(
request.getParameter("food_c2"));
if(food_c0 > 0){
total += orderArray[0] * food_c0;
orderName += "짜장면" + food_c0 + "개<br>";
}
if(food_c1 > 0){
total += orderArray[1] * food_c1;
orderName += "짬뽕" + food_c1 + "개<br>";
}
if(food_c2 > 0){
total += orderArray[2] * food_c2;
orderName += "볶음밥" + food_c2 + "개<br>";
}
%>
[주문 음식]<br>
<%= orderName %>
총 지불금액 : <%= String.format("%,d원",total) %>
</body>
</html>
Forward 액션 태그
하나의 JSP 페이지에서 다른 JSP 페이지로 요청 처리를 전달할 때 사용
동작 방식
<jsp:forward> 액션 태그의 사용법
<jsp:forward page=”이동할 페이지”/>forward 와 redirect 의 특징 비교
| 메서드 | 특징 |
|---|---|
| forward <jsp:forward /> | 같은 웹서버, 같은 웹 애플리케이션 디렉토리에 속하는 웹 자원만 호출 가능 request 내장 객체를 통해 데이터를 전달 |
| redirect response.sendRedirect() | 다른 웹 서버에 있는 웹 자원도 호출할 수 있음 호출할 JSP페이지의 URL 뒤에 데이터를 붙여서 전달 |
Forward A
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>forward test</title>
</head>
<body>
forwardA.jsp페이지, 보여지지 않습니다.
</body>
</html>
<jsp:forward page="forwardB.jsp">
<jsp:param value="오렌지" name="color"/>
</jsp:forward>Forward B
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>forwardB.jsp</title>
</head>
<body>
forwardB.jsp 페이지<br>
request에 파라미터로 전송된 데이터 = <%= request.getParameter("color") %>
</body>
</html>Forward A 실행
redirect -> 주소가 변경되지만
forward -> 주소는 그대로기 때문에 client는 바뀐 것을 알 수가 없다.
Error 처리
page 디렉티브를 이용한 에러 처리
에러 페이지 지정
<%@ page errorPage = "예외발생시보여질JSP지정" %>에러 페이지 작성
<%@ page isErrorPage = "true" %>isErrorPage 속성이 true인 경우 에러 페이지로 지정
응답 상태 코드 별 에러 페이지 지정
web.xml 파일에서 설정
<error-page>
<error-code>에러코드</error-code>
<location>에러페이지의 URI</location>
</error-page>주요 HTTP Status Code 표
| HTTP Status Code | 메시지 |
|---|---|
| 200 | OK, 에러 없이 전송이 성공 |
| 403 | Forbidden(금지) 서버가 허용하지 않는 웹 페이지나 미디어를 사용자가 요청할 때 |
| 404 | Not Found, 문서를 찾을 수 없음. 이 에러는 클라이언트가 요청한 문서를 찾지 못한 경우에 발생. URL을 다시 잘 보고 주소가 올바로 입력되었는지를 확인. |
| 500 | Internal Server Error(서버 내부 오류). 이 에러는 웹 서버가 요청사항을 수행할 수 없을 경우에 발생. |
예외 타입 별 에러 페이지 지정
web.xml 파일에서 설정
<error-page>
<exception-type>예외클래스명</exception-type>
<location>에러페이지의 URI</location>
</error-page>에러 페이지 우선 순위
- page 디렉티브의 errorPage 속성에서 지정한 에러 페이지를 보여준다.
- JSP 페이지에서 발생한 예외 타입이 web.xml 파일의
<exception-type>에서 지정한 예외 타입과 동일한 경우 지정한 에러 페이지를 보여준다. - JSP 페이지에서 발생한 에러 코드가 web.xml 파일의
<error-code>에서 지정한 에러 코드와 동일한 경우 지정한 에러 페이지를 보여준다. - 아무것도 해당되지 않을 경우 웹 컨테이너가 제공하는 기본 에러 페이지를 보여준다.
Read Parameter
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 에러가 발생할 때 보여질 페이지 지정 --%>
<%@ page errorPage="/ch06_errorPage/error/viewErrorMessage.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파라미터 출력</title>
</head>
<body>
name 파라미터의 값 : <%= request.getParameter("name").toUpperCase() %>
</body>
</html>View Error Message
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isErrorPage="true" %>
<%-- isErrorPage="true"는 현재 페이지가 에러가 발생했을 때 동작하는 페이지라고 설정 --%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예외 발생</title>
</head>
<body>
요청 처리 과정에서 예외가 발생했습니다.<br>
빠른 시간 내에 문제를 해결하도록 하겠습니다.<br>
예외 타입 : <%= exception.getClass().getName() %><br>
예외 메시지 : <b><%= exception.getMessage() %></b>
</body>
</html>
404 Error page
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404 에러 발생</title>
</head>
<body>
<h1>404</h1>
<strong>요청한 페이지는 존재하지 않습니다.</strong>
<br><br>
주소를 다시 확인하고 사용하세요.
</body>
</html>500 Error page
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>500 에러 발생</title>
</head>
<body>
<h1>500</h1>
<strong>페이지 호출시 오류가 발생했습니다.</strong>
<br><br>
잠시 후에 다시 사용하시기 바랍니다.
</body>
</html>web.xml 수정
<!-- 응답 상태 코드별 에러 페이지 지정 -->
<error-page>
<error-code>404</error-code>
<location>/ch06_errorPage/error/error404.jsp</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/ch06_errorPage/error/error500.jsp</location>
</error-page>Read Parameter 2
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파라미터 출력</title>
</head>
<body>
name 파라미터의 값 : <%= request.getParameter("name").toUpperCase() %>
</body>
</html>실행 결과
페이지 자체에 오류가 포함이 되어있다면 500 error 페이지
페이지 뒤 알 수 없는 창으로 이동하게 되면 404 error 페이지
Null Pointer 예외
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NULL 에러 발생</title>
</head>
<body>
<h1>NULL</h1>
<strong>서비스 처리 과정에서 NULL 예외가 발생하였습니다.</strong>
</body>
</html>web.xml 수정
<!-- 에러 타입별 에러 페이지 지정 -->
<error-page>
<exception-type>java.lang.NullPointerException</exception-type>
<location>/ch06_errorPage/error/errorNullPointer.jsp</location>
</error-page>Read Parameter2 실행
우선순위가 작용
Cookie
웹 브라우저가 보관하고 있는 데이터로서 웹 서버에 요청을 보낼 때 함께 전송
구성 요소
- 이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
- 값 : 쿠키의 이름과 관련된 값
- 유효시간 : 쿠키의 유지 시간
- 도메인 : 쿠키를 전송할 도메인
- 경로 : 쿠키를 전송할 요청 경로
쿠키 생성하기
쿠키 생성
Cookie cookie = new Cookie(cookieName,cookieValue);생성된 쿠키를 클라이언로 전송
response.addCookie(cookie);Cookie 클래스가 제공하는 메서드
| 메서드 | 리턴타입 | 설명 |
|---|---|---|
| getName() | String | 쿠키의 이름을 구함 |
| getValue() | String | 쿠키의 값을 구함 |
| setValue(String value) | void | 쿠키의 값을 지정 |
| setDomain(String pattern) | void | 이 쿠키가 전송될 서버의 도메인을 지정 |
| getDomain() | String | 쿠키의 도메인을 구함 |
| setPath(String uri) | void | 쿠키를 전송할 경로를 지정 |
| getPath() | String | 쿠키의 전송 경로를 구함 |
| setMaxAge(int expiry) | void | 쿠키의 유효 시간을 초 단위로 지정. 음수를 입력할 경우 웹 브라우저를 닫을 때 쿠키가 함께 삭제 |
| getMageAge() | int | 쿠키의 유효 시간을 구함 |
쿠키값 읽어오기
Cookie[] cookies = request.getCookies();Cookie 실습
Make Cookie
쿠키 유효시간 지정(단위 : 초)
쿠키 유효시간을 지정하면 클라이언트 영역의 저장소에 쿠키 정보 보관
쿠키 유효시간을 미지정하면 메모리에 쿠키 정보를 보관
cookie.setMaxAge(30*60);
cookie.setMaxAge(-1); //=> 메모리에 쿠키 정보를 보관<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.net.URLEncoder" %>
<%
Cookie cookie = new Cookie("name", URLEncoder.encode("홍길동","UTF-8"));
// 생성한 쿠키를 클라이언트에 전송
response.addCookie(cookie);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 생성</title>
</head>
<body>
<%= cookie.getName() %> 쿠키의 값은 <b><%= cookie.getValue() %></b>
</body>
</html>
View Cookie
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.net.URLDecoder" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 목록</title>
</head>
<body>
<h1>쿠키 목록</h1>
<%
// 클라이언트로부터 전송된 쿠키 정보 반환
Cookie[] cookies = request.getCookies();
if(cookies != null && cookies.length > 0){
for(int i = 0; i < cookies.length; i++){
%>
<%= cookies[i].getName() %> =
<%= URLDecoder.decode(cookies[i].getValue(),"UTF-8") %>
<br>
<%
}
} else{
%>
쿠키가 존재하지 않습니다.
<%
}
%>
</body>
</html>
Modify Cookie
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.net.URLEncoder"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 값 변경</title>
</head>
<body>
<%
// 클라이언트로부터 전송된 쿠키 정보를 반환
Cookie[] cookies = request.getCookies();
if(cookies != null && cookies.length > 0){
for(int i = 0; i<cookies.length; i++){
if(cookies[i].getName().equals("name")){
Cookie cookie = new Cookie("name", URLEncoder.encode("JSP프로그래밍","UTF-8"));
// 생성된 쿠키를 클라이언트에 전송
response.addCookie(cookie);
out.println("name 쿠키의 값을 변경합니다.");
}
}
} else{
out.println("쿠키가 존재하지 않습니다.");
}
%>
</body>
</html>
Delete Cookie
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>쿠키 삭제</title>
</head>
<body>
<%
// 클라이언트로부터 전송된 쿠키 정보를 반환
Cookie [] cookies = request.getCookies();
if(cookies != null && cookies.length > 0){
for(int i = 0; i<cookies.length; i++){
//name 이라는 쿠키명을 사용하는 쿠키가 존재하는지 검색
if(cookies[i].getName().equals("name")){
//name 쿠키명으로 쿠키 생성
Cookie cookie = new Cookie("name","");
cookie.setMaxAge(0); //0이면 쿠키가 바로 삭제 된다
// 생성된 쿠키를 클라이언트에 전송
response.addCookie(cookie);
out.println("name 쿠키를 삭제합니다.");
}
}
}else{
out.println("쿠키가 존재하지 않습니다.");
}
%>
</body>
</html>
Session
웹 컨테이너에서 클라이언트의 정보를 보관할 때 사용
오직 서버에서만 생성
클라이언트마다 세션이 생성
세션의 주요 메서드
| 메서드 | 리턴 타입 | 설명 |
|---|---|---|
| getId() | String | 세션의 고유 ID를 구함 |
| getCreationTime() | long | 세션이 생성된 시간을 구함. 시간은 1970년1월1일 이후 흘러간 시간을 의미. 단위는 1/1000초 |
| getLastAccessedTime() | long | 웹 브라우저가 가장 마지막에 섹션에 접근한 시간을 구함. 시간은 1970년1월1일 이후 흘러간 시간을 의미. 단위는 1/1000초 |
| setMaxInactiveInterval(int second) | void | 세션 유효시간을 초단위로 설정 |
| getMaxinactiveInterval() | int | 설정된 세션 유효시간을 반환 |
Session 실습
Session Information
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%
Date time = new Date();
SimpleDateFormat sf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>세션 정보</title>
</head>
<body>
세션 ID : <%= session.getId() %><br>
세션 생성 시간 : <%= session.getCreationTime() %><br>
<%
time.setTime(session.getCreationTime());
%>
세션 생성 시간 : <%= sf.format(time) %><br>
최근 접근 시간 : <%= session.getLastAccessedTime() %><br>
<%
time.setTime(session.getLastAccessedTime());
%>
최근 접근 시간 : <%= sf.format(time) %><br>
세션 유지 시간 변경하기(기본 세션 유지 시간은 30분)<br>
<%
session.setMaxInactiveInterval(60*20);
//web.xml에 50분으로 지정된 상태임(JSP에서 세팅한 정보가 현재 세션에 우선 반영이 된다.)
%>
세션 유지 시간 : <%= session.getMaxInactiveInterval() %> 초<br>
</body>
</html>Session 유지 시간 변경 - web.xml
xml에서는 분단위로 작성함
<!-- 세션 유지 시간 지정() -->
<session-config>
<session-timeout>50</session-timeout> <!-- 분단위 -->
</session-config>
Login 실습
Login Form
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
</head>
<body>
<form action="s03_sessionLogin.jsp" method="post">
ID <input type="text" name="id"><br>
PW <input type="password" name="password"><br>
<input type="submit" value="login">
</form>
</body>
</html>
Session Login
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
</head>
<body>
<%
//Post 방식으로 전송된 데이터 인코딩 타입 지정
request.setCharacterEncoding("UTF-8");
String id = request.getParameter("id");
String password = request.getParameter("password");
//테스트용으로 id와 password가 같으면 로그인 처리
if(id.equals(password)){ // 로그인 성공
// 속성명 속성값
session.setAttribute("user_id", id);
%>
ID <%=id %> Logged in<br>
<input type="button" value="Login Check" onclick="location.href='s04_sessionLoginCheck.jsp'">
<input type="button" value="Logout" onclick="location.href='s05_sessionLogout.jsp'">
<%
} else{ // 로그인 실패
%>
<script type="text/javascript">
alert('아이디와 비밀번호가 불일치합니다. 로그인에 실패하였습니다.');
history.go(-1);
</script>
<%
}
%>
</body>
</html>
Session Login Check
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login 여부 검사</title>
</head>
<body>
<%
String user_id = (String)session.getAttribute("user_id");
if(user_id != null){ // 로그인이 된 경우
%>
[<%= user_id %>] Logged in!
<br>
<input type="button" value="Logout" onclick="location.href='s05_sessionLogout.jsp'">
<% } else{ // 로그인이 되지 않은 경우
%>
Not Logged in.
<br>
<input type="button" value="Login" onclick="location.href='s02_sessionLoginForm.jsp'">
<%
}
%>
</body>
</html>
Session Logout
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Logout</title>
</head>
<body>
<%
// 세션 안의 모든 속성을 제거해서 세션을 갱신
session.invalidate();
%>
Logged out.<br>
<input type="button" value="Login Check" onclick="location.href='s04_sessionLoginCheck.jsp'">
<input type="button" value="Login" onclick="location.href='s02_sessionLoginForm.jsp'">
</body>
</html>
File Upload 실습
File Form 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>
<form action="/ch03_JSP/fileUpload" method="post" enctype="multipart/form-data">
작성자<input type="text" name="user"><br>
제목 <input type="text" name="title"><br>
파일명 <input type="file" name="uploadFile"><br>
<input type="submit" value="파일 올리기">
</form>
</body>
</html>
File Upload Servlet
maxFileSize = 개별 파일의 전송 가능한 최대 크기
maxRequestSize : 전송되는 모든 파일의 용량을 합친 최대 크기
package kr.web.ch05;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
// maxFileSize = 개별 파일의 전송 가능한 최대 크기
// maxRequestSize : 전송되는 모든 파일의 용량을 합친 최대 크기
@MultipartConfig(
maxFileSize = 1024 * 1024 * 5,
maxRequestSize = 1024 * 1024 * 50
)
@WebServlet("/fileUpload")
public class UploadServlet extends HttpServlet {
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 컨텍스트 경로상의 파일 업로드 절대 경로 구하기
String realFolder = request.getServletContext().getRealPath("/upload");
// 문서 타입 및 캐릭터셋 지정
response.setContentType("text/html;charset=utf-8");
// Post 방식으로 전송된 데이터 인코딩 타입 지정
request.setCharacterEncoding("UTF-8");
// HTML 출력을 위한 출력 스트림을 생성
PrintWriter out = response.getWriter();
try {
out.println("작성자 : " + request.getParameter("user") + "<br>");
out.println("제목 : "+ request.getParameter("title") + "<br>");
out.println("--------------------------------<br>");
out.println("파일 업로드 절대 경로 : " + realFolder + "<br>");
Part part = request.getPart("uploadFile");
String fileName = part.getSubmittedFileName();
if(!fileName.isEmpty()) {
// 지정한 경로에 파일을 저장
part.write(realFolder + "/" + fileName);
out.println("파라미터 명 : " + part.getName());
out.println("컨텐트 타입 : " + part.getContentType() + "<br>");
out.println("파일명 : " + fileName + "<br>");
out.println("파일 크기 : " + part.getSize() + "bytes<br>");
out.println("--------------------------------<br>");
}
} catch (IllegalStateException e) {
out.println("용량 초과 : " + e.toString());
}
}
}
다중 File Upload
File Form 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>
<form action="/ch03_JSP/fileMultiUpload" method="post" enctype="multipart/form-data">
이름 <input type="text" name="name"><br><br>
제목 <input type="text" name="title"><br><br>
이미지 1 <input type="file" name="uploadFile1" accept="image/gif,image/png,image/jpeg"><br><br>
이미지 2 <input type="file" name="uploadFile2" accept="image/gif,image/png,image/jpeg"><br><br>
<input type="submit" value="파일 올리기">
</form>
</body>
</html>
File Upload Servlet
package kr.web.ch05;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
@MultipartConfig(
maxFileSize = 1024 * 1024 * 10,
maxRequestSize = 1024 * 1024 * 50
)
@WebServlet("/fileMultiUpload")
public class UploadServlet2 extends HttpServlet {
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String realFolder = request.getServletContext().getRealPath("/upload");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("작성자 : " + request.getParameter("name") + "<br>");
out.println("제목 : "+ request.getParameter("title") + "<br>");
out.println("--------------------------------<br>");
Part part1 = request.getPart("uploadFile1");
String fileName = part1.getSubmittedFileName();
if(!fileName.isEmpty()) {
part1.write(realFolder + "/" + fileName);
out.println("<img src=\"/ch03_JSP/upload/"+fileName+"\">");
}
Part part2 = request.getPart("uploadFile2");
String fileName2 = part2.getSubmittedFileName();
if(!fileName2.isEmpty()) {
part2.write(realFolder + "/" + fileName2);
out.println("<img src=\"/ch03_JSP/upload/"+fileName2+"\">");
}
} catch (IllegalStateException e) {
out.println("용량 초과 : " + e.toString());
}
}
}package kr.web.ch05;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Collection;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
@MultipartConfig(
maxFileSize = 1024 * 1024 * 10,
maxRequestSize = 1024 * 1024 * 50
)
@WebServlet("/fileMultiUpload")
public class UploadServlet2 extends HttpServlet {
@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String realFolder = request.getServletContext().getRealPath("/upload");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
try {
out.println("작성자 : " + request.getParameter("name") + "<br>");
out.println("제목 : "+ request.getParameter("title") + "<br>");
out.println("--------------------------------<br>");
Collection<Part> parts = request.getParts();
for(Part p : parts) {
String name = p.getName();
String collecFileName = p.getSubmittedFileName();
if(name != null && collecFileName.isEmpty()) {
p.write(realFolder + "/" + collecFileName);
out.println("<img src=\"/ch03_JSP/upload/"+collecFileName+"\">");
}
}
} catch (IllegalStateException e) {
out.println("용량 초과 : " + e.toString());
}
}
}
[실습] 프로필 사진 업로드 폼
이미지 미리보기 보여주기, 이미지가 올라오면 submit 버튼 보이게 하기
Profile Form
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프로필 사진 업로드 폼</title>
<script type="text/javascript">
/* */
window.onload = function(){
const image = document.getElementById('image');
const file = document.getElementById('file');
const submit_btn = document.getElementById('submit_btn');
file.onchange = function () {
if (!file.files[0]) {
//기본이미지 노출
image.src = '../images/face.png';
return;
}else{
submit_btn.style.display = '';
}
//FileReader 객체 생성
const reader = new FileReader();
//이미지 읽기
reader.readAsDataURL(file.files[0]);
reader.onload = function () {
image.src = reader.result;
};
};
};
</script>
</head>
<body>
<h2>Profile Image Upload</h2>
<img src="../images/face.png" width="200" height="200" id="image">
<form action="/ch03_JSP/profile" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" accept="image/gif,image/png,image/jpeg">
<input type="submit" value="Profile Upload" id="submit_btn" style="display: none;">
</form>
</body>
</html>
Lucky Things🍀