JSP | 웹스토어 이미지 경로 변경 (크롬에서 이미지가 표시되지 않는 문제 수정)

kjh95.tistory.com/260

JSP | 파일업로드 2(동일한 파일 업로드) | 기존 웹스토어 예제 이미지 업로드 추가 | 부트스트랩 4.

동일한 파일 업로드 예제 fileupload_commons_2.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 파일 업로드(commons.jar이용) 올린 사람 : 파 일..

kjh95.tistory.com

크롬에서 이미지가 표시되지 않는 문제 수정

addProduct.jsp에 이미지를 등록을 누르면 upload폴더가 아닌 image폴더로 저장

processAddProduct.jsp 요청 처리하는 절대 경로 수정

processAddProduct.jsp

<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="kr.gov.dto.Product"%>
<%@page import="kr.gov.dao.ProductRepository"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
	request.setCharacterEncoding("UTF-8");
	
	//addProduct.jsp에서 사용자가 업로드한 이미지 부분을 받아저장.
	String filename = "";
	/* String realFolder = "C:\\workspace-jsp\\upload"; */ //웹 애플리케이션에서 절대경로
	String realFolder = "C:\\workspace-jsp\\WebStore\\WebContent\\resources\\images";
	int maxsize = 100 * 1024 * 1024;                    //최대 업로드 크기
	String encType = "UTF-8";                        //인코딩 유형
	
	MultipartRequest multi = new MultipartRequest(request, realFolder, maxsize, 
								encType, new DefaultFileRenamePolicy());
	
	
	/* addProduct.jsp에서 사용자가 입력한 부분 받아서 저장 */
	
	String productId = multi.getParameter("productId");    //상품 아이디
	String pname = multi.getParameter("pname");         //상품
	String unitprice = multi.getParameter("unitprice");   //상품가격
 	String description = multi.getParameter("description");  //상품 설명
	String menufecturer = multi.getParameter("menufecturer"); //제조사
	String category = multi.getParameter("category");     //분류
	String numberOfstock = multi.getParameter("numberOfstock");  //재고 수
	String condition = multi.getParameter("condition");    //신상품 or 중고품 or 재생품
	
	Integer price;
	long stock;
	
	//단가 입력창에 미 입력시에 
	if(unitprice.isEmpty()){
		price = 0;	//오토박싱
	}
	else {
		//String을 Integer로 변환
		price = Integer.valueOf(unitprice);
	}
	
	if(numberOfstock.isEmpty()){
		stock = 0;
	}
	else {
		//String을 long타입으로 변환
		stock = Long.valueOf(numberOfstock);
	}
	
	Enumeration files = multi.getFileNames();
	String fname = (String)files.nextElement();
	String fileName = multi.getFilesystemName(fname);
	
	
	ProductRepository dao = ProductRepository.getInstance();
	Product newProduct = new Product();
	
	//Product 객체에 사용자가 입력한 내용을 저장
	newProduct.setProductId(productId);
	newProduct.setPname(pname);
	newProduct.setUnitprice(price);
	newProduct.setDescription(description);
	newProduct.setMenufecturer(menufecturer);
	newProduct.setCategory(category);
	newProduct.setNumberOfstock(stock);
	newProduct.setCondition(condition);
	//이미지 저장 부분
	newProduct.setFilename(fileName);
	
	//Arraylist에 새상품을 추가
	dao.addProduct(newProduct);
	//페이지 이동시킴
	response.sendRedirect("products.jsp");
%>

products.jsp 경로지정 이미지 출력 부분 수정

products.jsp

<%@page import="kr.gov.dao.ProductRepository"%>
<%@page import="kr.gov.dto.Product"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Calendar"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- <jsp:useBean id="productDAO" class="kr.gov.dao.ProductRepository" scope="session"/> --%>

<% request.setCharacterEncoding("UTF-8"); %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>상품 목록</title>
 <!--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./resources/css/bootstrap.min.css">  
</head>
<body>
	<jsp:include page="menu.jsp"/>

	<div class="jumbotron">
		<div class="contaner">
			<h1 class="display-3">상품 목록</h1>
		</div>
	</div>
	
	<%	
		//싱글톤 객체사용
		ProductRepository dao = ProductRepository.getInstance();	
	
		//상품목록 가져옴
		ArrayList<Product> listOfProducts = dao.getAllProducts();
		
	%>
	
	<div class="container">
		<div class="row" align="center">
			<%
				for(int i = 0; i<listOfProducts.size(); i++){
					Product product = listOfProducts.get(i);
					
			%>
			<div class="col-md-4">
				<!-- 경로를 지정해서 이미지를 출력 -->
				<%-- <img alt="" src="C:/workspace-jsp/upload/<%=product.getFilename() %>" style="width:100%"> --%>
				<img alt="" src="${pageContext.request.contextPath}/resources/images/<%=product.getFilename() %>" style="width:100%">
				<h3><%=product.getPname() %></h3>
				<p><%=product.getDescription() %></p>
				<p><%=product.getUnitprice() %>원</p>
				<p><a href="./product.jsp?id=<%=product.getProductId() %>" 
				class="btn btn-secondary" role="button">상세 정보 &raquo;</a></p>
			</div>			 
			<%
				}
			%>
		</div>
		<hr>
	</div>
	
	<jsp:include page="footer.jsp"/>
</body>
</html>

product.jsp 이미지 표시 경로 변경

product.jsp

<%@page import="kr.gov.dto.Product"%>
<%@page import="kr.gov.dao.ProductRepository"%>
<%@page errorPage="exceptionNoProductId.jsp" %> <!-- id값이 유효하지 않으면 에러페이지로 이동시킨다. -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%-- <jsp:useBean id="productDAO" class="kr.gov.dao.ProductRepository" scope="session"/> --%>

<% request.setCharacterEncoding("UTF-8"); %>
    
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>상품 상세 정보</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> 
</head>
<body>
	<jsp:include page="menu.jsp"/>
	
	<div class="jumbotron">
		<div class="contaner">
			<h1 class="display-3">상품 정보</h1>
		</div>
	</div>
	
	<%	
		//넘어온 상품 아이디값을 얻었다.
		String id =request.getParameter("id");
		
		ProductRepository dao = ProductRepository.getInstance();
		
		//넘어온 상품아이디값을 이용해 실제 해당되는 Product객체를 얻음.
		Product product = dao.getProductById(id);
	%>
	
	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<%-- <img alt="" src="C:/workspace-jsp/upload/<%=product.getFilename() %>" style="width:100%"> --%>
				<img alt="" src="${pageContext.request.contextPath}/resources/images/<%=product.getFilename() %>" style="width:100%">
			</div>
			<div class="col-md-6">
				<h3><%=product.getPname() %></h3>
				<p><%=product.getDescription() %></p>
				<p><b>상품 코드 :</b><span class="badge badge-danger" ><%=product.getProductId() %><span></b></p>
				<p><b>제조사 : </b><%=product.getMenufecturer() %></p>
				<p><b>분류 : </b><%=product.getCategory() %></p>
				<p><b>제고 수 : </b><%=product.getNumberOfstock() %></p>
				<h4><%=product.getUnitprice() %>원</h4>
				
				<p><a href="addProduct.jsp" class="btn btn-info">상품 등록&raquo;</a></p>
				<a href="./products.jsp" class="btn btn-secondary">상품 목록&raquo;</a>
			</div>
		</div>
		<hr>
	</div>
	<jsp:include page="footer.jsp"/>
</body>
</html>