반응형
파일 전송 및 add 추가
addProduct.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<title></title>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
// 동일 jsp 내에 1개의 달러function
// document 내의 모든 요소들이 로딩된 후에 실행
$(function(){
console.log("개똥이");
// object를 선택(<input type="file" ..)
$("#productImage").on("change", handleImg);
// e : onchange 이벤트
function handleImg(e) {
console.log("파일 선택 이벤트");
//e.target : <input type="file" id="productImage" name="productImage" class="form-control"...
let files = e.target.files; // 파일들
// fileArr = [a.jpg, b.jpg, c.jpg]
let fileArr = Array.prototype.slice.call(files);
// f : 파일(a.jpg)
fileArr.forEach(function(f) {
// 이미지 체킹 (MIME타입)
if(!f.type.match("image.*")) {
alert("이미지만 가능합니다.");
return; // handleImg함수 자체를 종료
}
// 이미지가 맞다면
let reader = new FileReader();
//e : reader가 이미지 객체를 읽는 이벤트
reader.onload = function(e) {
let img_html = "<img src='" + e.target.result + "' style='width:100%' />";
// <p id="pImg"><img src='oewrpasdofiasdo..' ../></p>
// 요소.append : 누적, 요소.html : 새로고침 , 요소.innerHTML : Javascript에서 새로고침
$("#pImg").append(img_html);
}
reader.readAsDataURL(f);
});
}
});
</script>
</head>
<body>
<!-- include 액션 태그 -->
<jsp:include page="menu.jsp" />
<!-- --------------------상품등록 시작-------------------- -->
<div class="jumbotron">
<!-- container : 이 안에 내용있다 -->
<div class="container">
<h1 class="display-3">상품 등록</h1>
</div>
</div>
<!-- 내용 -->
<div class="container">
<!-- 폼태그, 폼페이지 -->
<form name="newProduct" action="processAddProduct.jsp" method="post"
class="form-horizontal" enctype="multipart/form-data">
<div class="form-group row">
<!-- 후보키(N.N, N.D) -> 중 1 속성 선택 -> 기본키(N.N, N.D) -->
<label class="col-sm-2">상품 아이디</label>
<div class="col-sm-3">
<input type="text" id="productId" name="productId"
class="form-controler" placeholder="상품 아이디" required/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상품 명</label>
<div class="col-sm-3">
<input type="text" id="pname" name="pname"
class="form-controler" placeholder="상품 명" required/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상품 가격</label>
<div class="col-sm-3">
<input type="number" id="unitPrice" name="unitPrice"
class="form-controler" placeholder="상품 가격" required/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">상품 설명</label>
<div class="col-sm-3">
<input type="text" id="description" name="description"
class="form-controler" placeholder="상품 설명" required/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">제조사</label>
<div class="col-sm-3">
<input type="text" id="manufacturer" name="manufacturer"
class="form-controler" placeholder="제조사"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">분류</label>
<div class="col-sm-3">
<input type="text" id="category" name="category"
class="form-controler" placeholder="분류"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">재고 수</label>
<div class="col-sm-3">
<input type="number" id="unitsInStock" name="unitsInStock"
class="form-controler" placeholder="재고 수"/>
</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" id="condition1"/><label for="condition1">신상품</label>
<input type="radio" name="condition" value="Old" id="condition2"/><label for="condition3">중고</label>
<input type="radio" name="condition" value="Refurbished" id="condition3"/><label for="condition3">재생품</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">제품 이미지</label>
<div class="col-sm-5">
<p id="pImg"></p>
<input type="file" id="productImage" name="productImage" class="form-control"
placeholder="제품 이미지" multiple/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-primary" value="등록" />
<button type="button" class="btn btn-info"
onclick="javascript:location.href='products.jsp'">목록보기</button>
</div>
</div>
</form>
</div>
<jsp:include page="footer.jsp" />
</body>
</html>
processAddProduct.jsp
<%@page import="java.util.UUID"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="java.util.List"%>
<%@ page import="org.apache.commons.fileupload.DiskFileUpload"%>
<%@ page import="kr.or.ddit.dao.ProductRepository"%>
<%@ page import="kr.or.ddit.vo.ProductVO"%>
<%@ page import="java.util.Enumeration"%>
<%
request.setCharacterEncoding("UTF-8");
//이미지 파일업로드 처리
String path = "D:\\D_setting\\A_TeachingMaterial\\10_Jsp\\workspace\\JSPBook\\WebContent\\images";
DiskFileUpload upload = new DiskFileUpload();
upload.setSizeMax(5000000); //5Mb
upload.setSizeThreshold(5 * 4096); //5Mb
upload.setRepositoryPath(path); //임시
List items = upload.parseRequest(request);
Iterator params = items.iterator();
//파라미터 value의 타입은 String
String productId = "";
String pname = "";
String unitPrice = "";
String description = "";
String manufacturer = "";
String category = "";
String unitsInStock = "";
String condition = "";
String filename = "";
String quantity = "";
//unitPrice
double price = 0d;
//unitsInStock
double stock = 0d;
//파일객체 전용 변수
String fileFieldName = ""; //productImage
String fileName = ""; //파일 위치
String contentType = ""; //image/jpeg
while(params.hasNext()){
//스프링 프레임워크 => MultipartFile
FileItem item = (FileItem)params.next();
if(item.isFormField()){
String name = item.getFieldName(); //productId
if(name.equals("productId")){
productId = item.getString("UTF-8"); //P1237
}else if(name.equals("pname")){
pname = item.getString("UTF-8"); //키보드
}else if(name.equals("unitPrice")){
unitPrice = item.getString("UTF-8"); //1000000
if(unitPrice.isEmpty()) {
price = 0d;
} else {
price = Double.parseDouble(unitPrice);
}
}else if(name.equals("description")){
description = item.getString("UTF-8"); //좋은 키보드
}else if(name.equals("manufacturer")){
manufacturer = item.getString("UTF-8"); //Samsung
}else if(name.equals("category")){
category = item.getString("UTF-8"); //주변기기
}else if(name.equals("unitsInStock")){
unitsInStock = item.getString("UTF-8"); //1000
if(unitsInStock.isEmpty()) {
stock = 0d;
} else {
stock = Double.parseDouble(unitsInStock);
}
}else if(name.equals("condition")){
condition = item.getString("UTF-8"); //old
}
} else {
fileFieldName = item.getFieldName(); //productImage
fileName = item.getName(); //파일경로+명
contentType = item.getContentType(); //MIME타입
long fildSize = item.getSize(); //파일 크기
//파일명만 추출
fileName = fileName.substring(fileName.lastIndexOf("\\")+1);
//UUID 처리
UUID uuid = UUID.randomUUID();
fileName = uuid.toString() + "_" + fileName;
//설계
File file = new File(path + "\\" + fileName);
//복사 실행
item.write(file);
} //end if
} //end while
ProductVO productVO = new ProductVO();
productVO.setProductId(productId); //P1237
productVO.setPname(pname); //키보드
productVO.setUnitPrice(price); //30000
productVO.setDescription(description); //좋은 키보드
productVO.setManufacturer(manufacturer); //Samsung
productVO.setCategory(category); //주변기기
productVO.setUnitsInStock(stock); //4
productVO.setCondition(condition); //Old
productVO.setFilename(fileName); //asdfsd_P1237.jpg
out.print("<p>productVO : " + productVO + "</p>");
//싱글톤 객체로 생성
ProductRepository dao = ProductRepository.getInstance();
dao.addProduct(productVO);
//목록으로 이동
response.sendRedirect("products.jsp");
%>
반응형