본문 바로가기
JSP/웹페이지 만들기

JSP 웹페이지 만들기 7장 연습문제

by 미눅스[멘토] 2023. 7. 5.
728x90

 

01.

form 태그의 method 속성은 무조건 POST 방식을 써야 함

form 태그의 enctype 속성은 무조건 multipart/form-data를 써야 함

form 태그의 action 속성은 파일 업로드를 처리할 jsp 파일을 설정해야 함

input 태그의 type 속성은 file로 설정해야 함

 

02.

브라우저에서 서버로 파일 업로드 - 서버가 요청 파라미터를 분석하여 파일을 찾음 - 서버의 디렉토리에 저장

MultipartRequest 클래스를 이용하거나 Common-FileUpload를 통해 파일을 업로드할 수 있다.

MultipartRequest 클래스는 cos.jar 파일을 추가하고, MultipartRequest 클래스 객체를 생성하여 생성된 MultipartRequest 객체의 메서드를 사용하여 처리한다. Common-FileUpload는 DiskFileUpload 객체를 생성하여 제공해주는 메소드를 통해 파일을 처리하고 업로드한다. Common-FileUpload를 이용하려면 라이브러리에 commons-fileupload.jar 파일과 commons-io.jar 파일이 존재해야 한다.

 

03.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>
	<form action="fileupload01_process.jsp" enctype="multipart/form-data" method="post">
		<p>파일 : <input type="file" name="filename"></p>
		<p><input type="submit" value="파일 업로드"></p>
	</form>
</body>
</html>

결과

 

 

 

fileupload01_process.jsp

<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.DiskFileUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<% // 스크립틀릿

   // 폼 페이지에서 전송된 파일을 저장할 서버의 경로를 작성
   String fileUploadPath = "C:\\upload";
   // Commons-FileUpload 라이브러리 패키지에 포함되어 있는 DiskfileUpload
   // 인스턴스를 생성 
   DiskFileUpload upload = new DiskFileUpload();
   // 웹 브라우저 (크롬)가 전송한  multipart/form 유형의 요청 파라미터들을 가져옴
   // parse(파싱) : 구문분석, 의미분석  
   List items = upload.parseRequest(request);
   // 폼 페이지에서 전송된 요청 파라미터를 Iterator 클래스로 변환
   Iterator params = items.iterator();
   // 폼 페이지에서 전송된 요청 파라미터가 더이상 없을 때까지 반복
    while(params.hasNext()){
       //params.next()의 리턴 타입은 Object이므로 FileItem 타입으로 형변환
       FileItem fileItem = (FileItem)params.next();
       //FileItem 클래스의 메소드를 사용하여 요청 파라미터가
       //일반 데이터인지 파일인지 분석 및 처리하여
       //파일을 업로드함
       //FormField : <input type="text", <input type="radio", <select..
       if(!fileItem.isFormField()){
          //파일명 가져옴
          String fieldName= fileItem.getFieldName();
          String filetype = fileItem.getContentType();
          String fileName = fileItem.getName();
          long fileSize = fileItem.getSize();
          out.print("요청 파라미터 이름 : " + fieldName + "<br>");
          out.print("실제 파일 이름 : " + fileName + "<br>");
          out.print("저장 파일 이름 : " + fileName + "<br>");
          out.print("파일 콘텐츠 유형 : " + filetype +"<br>");
          out.print("파일 크기 : " + fileSize +"<br>");
          //업로드 대상(고객쪽)
          //D:\\webwork\\jqpro\\src\\main\\webapp\\images\\cloud03.jpg
           fileName.substring(fileName.lastIndexOf("\\")+1); // 파일명 추출하기 = cloud03.jpg
          //이곳으로 업로드 => c:\\upload + / + cloud03.jpg
          File file = new File(fileUploadPath + "/" + fileName);
           // 설계대로 복사 실행
//            fileItem.write(file);
       }
    }
%>

결과

 

 

 

 

 

05.

Books.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="bookVO.BookVO"%>
<%@ page import="java.util.List"%>
<%@ page import="bookDAO.BookReposutory"%>

<%
BookReposutory bookDAO = BookReposutory.getInstance(); 
List<BookVO> books = bookDAO.getAllProducts();
%>
<c:set var="books" value="<%=books%>"></c:set>
  
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
  
   
  
<body>
<%@ include file="menu.jsp" %>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">
				도서 목록
			</h1>
		</div>
	</div>
	<div style="width: 60%; margin: 0px auto;">
		<div class="row" style="justify-content:right;">
			<a href="./addBook.jsp" class="btn btn-primary">상품추가</a>	
		</div>
		<c:forEach var="book" items="${books}" varStatus="stat">
			<table style="margin: 0px auto; width: 100%;">
				<tr>
					<td rowspan="3" style="padding: 0px 40px 0px 0px;"><img src="<%=request.getContextPath()%>/images/${book.fileName}" style=" height: 200px;"></td>
					<th>
						<h5>${stat.count}번째 책</h5>
						<h3>[${book.category}] ${book.name}</h3>
					</th>
				</tr>
				<tr>
					<td>${book.description}<br><br></td>
					<td rowspan="2" style="vertical-align: top;"><a  href="Book.jsp?id=${book.bookId}" class="btn btn-secondary">상세 정보&raquo;</a></td>
				</tr>
				<tr>
					<td>${book.author} | ${book.publisher} | ${book.unitPrice}<br></td>
				</tr>
			</table>
			<hr>
		</c:forEach>		
	</div>
	<footer class="container">
		<p>&copy;BookMarket</p>	
	</footer>

</body>
</html>

결과

 

 

 

 

Book.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="bookVO.BookVO"%>
<%@ page import="java.util.List"%>
<%@ page import="bookDAO.BookReposutory"%>

<%
BookReposutory bookDAO = BookReposutory.getInstance(); 
String id = request.getParameter("id");
BookVO book = bookDAO.getBookById(id);
%>





<c:set var="book" value="<%=book%>"></c:set>
  
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
  
   
  
<body>
<%@ include file="menu.jsp" %>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">
				도서 정보
			</h1>
		</div>
	</div>
	<div style="width: 60%; margin: 0px auto;">
			<table style="margin: 0px auto; width: 100%;">
				
				<tr>
					<td rowspan="10" style="padding: 0px 40px 0px 0px; ">
						<img src="<%=request.getContextPath()%>/images/${book.fileName}" style="width">
					</td>
					<th><h3>[${book.category}] ${book.name}</h3></th>
				</tr>
				<tr>
					<td>${book.description}</td>
				</tr>
				<tr>
					<td>도서코드 : <span class="badge badge-danger">${book.bookId}</span></td>
				</tr>
				<tr>
					<td>출판사 : ${book.publisher}</td>
				</tr>
				<tr>
					<td>저자 : ${book.author}</td>
				</tr>
				<tr>
					<td>재고수 : ${book.unitsInStock}</td>
				</tr>
				<tr>
					<td>총 페이지 수 : ${book.totalPages}</td>
				</tr>
				<tr>
					<td>출판일 : ${book.releseDate}</td>
				</tr>
				<tr>
					<td><h3>${book.unitPrice}</h3></td>
				</tr>
				<tr>
					<td>
						<a href="#" class="btn btn-secondary">도서주문&raquo;</a>
						<a href="/products.jsp" class="btn btn-danger">도서목록&raquo;</a>
					</td>
				</tr>
			</table>
			<hr>
	</div>
	<footer class="container">
		<p>&copy;BookMarket</p>	
	</footer>

</body>
</html>

결과

 

 

 

 

addBook.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
<script type="text/javascript" src="/js/jquery-3.6.0.js"></script>
<script>
$(function(){
	console.log("개똥이");
	//이미지 미리보기 시작
	$("#productImage").on("change",handleImg);
	function handleImg(e){
		//첨부파일들
		let files = e.target.files;
		//파일 배열 Object
		let fileArr = Array.prototype.slice.call(files);
		//파일 반복
		fileArr.forEach(function(f){
			if(!f.type.match("image.*")){
				alert("이미지 확장자만 가능합니다.");
				//함수 종료
				return;
			}
			let reader = new FileReader();
			//e : 파일 읽을 때 이벤트
			reader.onload = function(e){
				let img_html = "<img src='"+e.target.result + "'style='width:100%;'/>";
				//class = col-sm-5 divImg
				$('.divImg').html(img_html);
				
			}
			//리더로 파일 읽음
			reader.readAsDataURL(f);
		});
	}
	
})

</script>
   
   
</head>

<body>
<%@ include file="menu.jsp" %>
	<div class="jumbotron">
		<div class="container">
			<h1 class="display-3">
				도서 등록
			</h1>
		</div>
	</div>

<div class="container">
	<form action="./processAddBook2.jsp" class="form-horizontal" enctype="multipart/form-data" method="post">
	<div class="form-group row">
		<label class="col-sm-2" for="bookId">도서 코드</label>
		<div class="col-sm-3">
			<input type="text" id="bookId" name="bookId">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="name">도서명</label>
		<div class="col-sm-3">
			<input type="text" id="name" name="name">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="unitPrice">가격</label>
		<div class="col-sm-3">
			<input type="text" id="unitPrice" name="unitPrice">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="author">저자</label>
		<div class="col-sm-3">
			<input type="text" id="author" name="author">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="publisher">출판사</label>
		<div class="col-sm-3">
			<input type="text" id="publisher" name="publisher">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="releseDate">출판일</label>
		<div class="col-sm-3">
			<input type="text" id="releseDate" name="releseDate">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="totalPages">총페이지 수</label>
		<div class="col-sm-3">
			<input type="text" id="totalPages" name="totalPages">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="description">상세 정보</label>
		<div class="col-sm-5">
			<textarea name="description" cols="50" rows="2" class="form-control"></textarea>
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2" for="unitsInStock">재고 수</label>
		<div class="col-sm-3">
			<input type="text" id="unitsInStock" name="unitsInStock">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2">상태</label>
		<div class="col-sm-5">
			<input type="radio" name="condition" value="New ">신규제품
			<input type="radio" name="condition" value="Old"> 중고 제품
			<input type="radio" name="condition" value="Refurbished"> 재생 제품
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2">파일 업로드</label>
		<div class="col-sm-5">
			<input type="file" id="productImage" name="filename">
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-5">이미지 미리보기</label>
		<div class="col-sm-5 divImg"></div>
	</div>
	
	<div class="form-group row">
		<div class="col-sm-offset-2 col-sm-10">
			<input type="submit" class="btn btn-primary" value="등록">
		</div>
	</div>
	</form>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>

결과

 

 

'JSP > 웹페이지 만들기' 카테고리의 다른 글

JSP 웹페이지 만들기 9장 연습문제(다국어)  (0) 2023.07.15
JSP 웹페이지 만들기 8장 연습문제  (0) 2023.07.15
JSP 20230703 웹페이지만들기 6장 form정리 및 실습  (0) 2023.07.03
JSP 20230629 웹페이지 만들기 5장 실습  (1) 2023.06.29
JSP 4장 액션 태그 + 자바빈즈 정리 + 연습문제  (1) 2023.06.27

관련글

티스토리툴바