[JSP/Servlet] 파일업로드 구현하기 +페이징

안녕하세요 yunamom 입니다 :D

이번 포스팅에서는 파일업로드(Mysql) , 파일 목록, 파일 상세보기화면을 구현해보겠습니다. 👩🏻‍💻

구현할 파일목록 (images 폴더 생성하기)

파일업로드 화면

파일 목록

파일 상세보기

Mysql 테이블 생성 및 webapp/images 폴더 생성

CREATE TABLE fileboard(
 unq INT unsigned NOT NULL AUTO_INCREMENT,
 name VARCHAR(50),
 title VARCHAR(100),
 fileName VARCHAR(200),
 hits INT unsigned default '0',
 uploadDate DATETIME,
 PRIMARY KEY(unq)
 );

 INSERT INTO fileboard VALUES(1, '테스트', '파일업로드 테스트 입니다.', 'file2.png', 0, sysdate());

 controller/Controller.java

[ OPEN ]

package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import service.FileListService;
import service.FileSelectOneService;
import service.Service;
import service.UploadService;


@WebServlet("*.do")
public class Controller extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		execute(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		execute(request, response);
	}
	
	private void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		String uri = request.getRequestURI();
		String conPath = request.getContextPath();
		String command = uri.substring(conPath.length());
		
		String site = null;
		Service service = null;
		switch(command) {
		case "/Main.do"          :
			site = "fileupload/main.jsp";
			break;
			
		case "/Upload.do"        :
			site = "fileupload/upload.jsp";
			break;	
			
		case "/FileList.do"      :
			service = new FileListService();
			service.execute(request, response);
			site = "fileupload/list.jsp";
			break;
			
		case "/FileSelect.do"     :
			service = new FileSelectOneService();
			service.execute(request, response);
			site = "fileupload/detail.jsp";
			break;
			
		case "/UploadService.do" :
			service = new UploadService();
			service.execute(request, response);
			site = "fileupload/main.jsp";
			break;
		}
		
		RequestDispatcher dis = request.getRequestDispatcher(site);
		dis.forward(request, response);

	}
}

 model/File.java 

[ OPEN ]

package model;


public class File {

	private int no; //게시물번호
	private int unq;
	private String name;
	private String title;
	private String fileName;
	private int hits;
	private String uploadDate;

	
	public int getNo() {
		return no;
	}

	public void setNo(int no) {
		this.no = no;
	}
	
	public int getUnq() {
		return unq;
	}

	public void setUnq(int unq) {
		this.unq = unq;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getFileName() {
		return fileName;
	}

	public void setFileName(String fileName) {
		this.fileName = fileName;
	}

	public int getHits() {
		return hits;
	}

	public void setHits(int hits) {
		this.hits = hits;
	}

	public String getUploadDate() {
		return uploadDate;
	}

	public void setUploadDate(String string) {
		this.uploadDate = string;
	}
}

 model/Paging.java 

[ OPEN ]

package model;

public class Paging {

	private int view;
	private int range;
	private int start;
	private int end;
	private int endPage;

	public int getView() {
		return view;
	}

	public void setView(int view) {
		this.view = view;
	}

	public int getRange() {
		return range;
	}

	public void setRange(int range) {
		this.range = range;
	}

	public int getStart() {
		return start;
	}

	public void setStart(int start) {
		this.start = start;
	}

	public int getEnd() {
		return end;
	}

	public void setEnd(int end) {
		this.end = end;
	}

	public int getEndPage() {
		return endPage;
	}

	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
}

 model/FileDAO.java 

[ OPEN ]

package model;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;




public class FileDAO {
	
	private Connection conn = null;
	private PreparedStatement pstmt = null;
	private ResultSet rs = null;
	private int result = 0;
	String mvURL = null;

	private static FileDAO instance = new FileDAO();
	
	public static FileDAO getInstance() {
		return instance;
	}
	
	//DB 연결하기
	public static Connection getConnection() throws Exception {
				
		String url = "jdbc:mysql://localhost:3306/database"; //데이터베이스 이름
		String id = "root";
		String pw = "root";
		//접속드라이버 연결
		Class.forName("com.mysql.cj.jdbc.Driver");
		//접속정보 세팅
		Connection con = DriverManager.getConnection(url, id, pw);
		//접속한 MySQL의 SQL실행 결과를 위한 메모리 공간 확보
		return con;
		
	}
	
	//DB 연결 종료하기
	public void close() throws SQLException {
		if(rs != null) rs.close();
		if(pstmt != null) pstmt.close();
		if(conn != null) conn.close();
	}
	
	//파일업로드 하기 
	public int insert(String name, String title, String file){
		
		try {
			
		conn = getConnection();
		
		String sql = " INSERT INTO fileboard ";
		       sql+= " (name, title, fileName, hits, uploadDate) ";
               sql+= " VALUES( ?, ?, ?, 0, sysdate() )";
		
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, name);
		pstmt.setString(2, title);
		pstmt.setString(3, file);
		
		result = pstmt.executeUpdate();
		
		close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return result;
	}
	//파일총갯수
	public int countAll() {
		int total = 0;
		try {
			conn = getConnection();
			
			String sql = "SELECT COUNT(*) FROM fileboard";
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();
			if(rs.next()) total = rs.getInt(1);
			
		}catch(Exception e) {
			e.printStackTrace();
		}
		
		return total;
	}
	
	//파일목록 조회 (start, end)
	public ArrayList<File> selectAll(int start, int end, int total) {

		ArrayList<File> list = new ArrayList<>();
		
		
		try {
			conn = getConnection();		
			
			String sql = " SELECT ";
			       sql+= " unq, ";
			       sql+= " name, ";
			       sql+= " title, ";
			       sql+= " fileName, ";
			       sql+= " hits, ";
			       sql+= " DATE_FORMAT(uploadDate, '%y/%m/%d')uploadDate ";
			       sql+= " FROM fileboard ";
			       sql+= " ORDER BY unq DESC LIMIT ?,?";
			pstmt = conn.prepareStatement(sql);
			pstmt.setInt(1, start);
			pstmt.setInt(2, end);
			rs = pstmt.executeQuery();
			int count = start;
			while(rs.next()) {
				
				File file = new File();
				file.setNo(total-count++);
				file.setUnq(rs.getInt(1));
				file.setName(rs.getString(2));
				file.setTitle(rs.getString(3));
				file.setFileName(rs.getString(4));
				file.setHits(rs.getInt(5));
				file.setUploadDate(rs.getString(6));
				list.add(file);
			}
			
			close();
		
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return list;

	}
	//선택된 파일 불러오기
	public File selectOne(String unq) {
		
		File file = new File();
		try {
			conn = getConnection();
			
			
			String sql = " SELECT ";
			       sql+= " unq, ";
			       sql+= " name, ";
			       sql+= " title, ";
			       sql+= " fileName, ";
			       sql+= " hits, ";
			       sql+= " DATE_FORMAT(uploadDate, '%y/%m/%d')uploadDate ";
			       sql+= " FROM fileboard ";
			       sql+= " WHERE unq ="+unq;
			pstmt = conn.prepareStatement(sql);
			
			rs = pstmt.executeQuery();
			rs.next();
			
			
			file.setUnq(rs.getInt(1));
			file.setName(rs.getString(2));
			file.setTitle(rs.getString(3));
			file.setFileName(rs.getString(4));
			file.setHits(rs.getInt(5));
			file.setUploadDate(rs.getString(6));				
			
			
			close();	
			
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return file;
	}

	public void updateHit(String unq) {
		// 조회수증가
		try {
			conn = getConnection();
			String sql = " UPDATE fileboard ";
			       sql+= " SET hits = hits+1 ";
			       sql+= " WHERE unq ="+unq;
			pstmt = conn.prepareStatement(sql);
					
			pstmt.executeUpdate();
			close();
		
			       
		} catch (Exception e) {
			e.printStackTrace();
		}	
	}
}

 service/Service.java 

[ OPEN ]

package service;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public interface Service {
	
	public void execute(HttpServletRequest request, HttpServletResponse response) throws IOException;

}

 service/UploadService.java 

[ OPEN ]

package service;


import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

import model.FileDAO;


public class UploadService implements Service {
       
	public void execute(HttpServletRequest request, HttpServletResponse response) throws IOException {
   	 
	   	String saveDir = request.getSession().getServletContext().getRealPath("images");
	   	System.out.println("절대경로 : " + saveDir);
	   	
	   	int maxSize = 1024*1024*15; 
		String encoding = "UTF-8";
			
			// saveDir: 경로
			// maxSize: 크기제한 설정
			// encoding: 인코딩타입 설정
			// new DefaultFileRenamePolicy(): 중복이름 방지	
			
		MultipartRequest multi = new MultipartRequest(request, saveDir, maxSize, encoding, new DefaultFileRenamePolicy());
		/* URL check */
		String uri = request.getRequestURI();
		String con = request.getContextPath();
		String command = uri.substring(con.length());
		System.out.println(command);
		
		String name = multi.getParameter("name");
		String title = multi.getParameter("title");
		String file = multi.getFilesystemName("file");
		
		
		FileDAO dao = FileDAO.getInstance(); // static 영역에 올려진 객체를 메소드로 얻어와서 메모리를 절약하는 싱글톤 패턴
		
		int result = dao.insert(name, title, file);
	
		if(result > 0) {
			System.out.println("저장완료!");			
		}else {
			System.out.println("저장실패!");
		}
	}	
}

 service/FileListService.java 

[ OPEN ]

package service;

import java.util.ArrayList;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.File;
import model.FileDAO;
import model.Paging;


public class FileListService implements Service {
       
	@Override
	public void execute(HttpServletRequest request, HttpServletResponse response) {
		
		FileDAO dao = FileDAO.getInstance();
		
		String view = request.getParameter("view");
		
		/* 현재 페이지 */
		int viewPage = (view == null) ? 1 : Integer.parseInt(view);
		
		/* 한 블럭( range : 범위 ) 의 페이지 수 */
		int rangeSize = 5; 
		
		int end = 5; // 한 페이지의 게시물 수 
		int start = (viewPage-1)*rangeSize;
		
		
		/* 총 파일 갯수 */
		int total = dao.countAll();
		// 마지막 페이지 
		int endPage = (int)Math.ceil((double)total/5);		
		
		// ( range : 범위 ) 
		int Range = (viewPage % rangeSize == 0)?viewPage/rangeSize:(viewPage/rangeSize)+1;
		// 이전버튼 블럭( range : 범위 ) 
		int startRange = (Range-1)*rangeSize+1;
		// 다음버튼 블럭( range : 범위 ) 
		int endRange = startRange + rangeSize-1;
		// 마지막 블락에서 총페이지수를 넘어가면 끝 페이지를 마지막 페이지 숫자로 넣어줍니다. 
		endRange = (endRange >= endPage) ? endPage : endRange;
		
		ArrayList<File> list = dao.selectAll(start, end, total);
		
		
		Paging paging = new Paging();			
		paging.setView(viewPage);
		paging.setRange(rangeSize);
		paging.setStart(startRange);
		paging.setEnd(endRange);
		paging.setEndPage(endPage);
		
		request.setAttribute("list", list);
		request.setAttribute("paging", paging);	
	}
}

 service/FileSelectoneService.java 

[ OPEN ]

package service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.File;
import model.FileDAO;


public class FileSelectOneService implements Service {

    
    public void execute(HttpServletRequest request, HttpServletResponse response) {
    	String unq = request.getParameter("unq");
    	FileDAO dao = FileDAO.getInstance();
    	
    	dao.updateHit(unq); // 조회수증가 
    	request.setAttribute("file", dao.selectOne(unq));
    }
}

---

 index.jsp 

[ OPEN ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<% response.sendRedirect("Main.do"); %>
</body>
</html>

 css/style.css 

[ OPEN ]

@charset "UTF-8";

*{
	margin: 0;
	padding: 0;
}
body{
	background: #ebecfa;
}
header{
	height: 100px;
	line-height: 100px;
	background: #444;
	text-align: center;
}
nav ul{
	height: 50px;
	line-height: 50px;
	background: #837b93;
}
li{
	float: left;
	list-style: none;
	padding: 0 10px;
}
a{
	text-decoration: none;
	color: rgb(104, 105, 105);
	font-weight: 900;
}
li a{
	color: #fff;
}
.Boxfile{ /* 정중앙 */
	margin: 3rem;
	display: grid;
	place-items: center;
	min-height: 50vh;
	background-color: rgba(255,255,255,0.7);
	padding: 1rem;
	border-radius: 0.3rem;
}
.input{
	font-size: 1rem;
	padding: 0.5rem 1rem;
	border-radius: 0.3rem;
	border: 1px solid #333;
}
.Boxbtn{
	text-align: center;
	padding: 1rem;
}
.btn{
	padding: 0.4rem 1rem;
	cursor: pointer;
	border-radius: 0.3rem;
	border: 1px solid #8e8f8f;
}
.btn:hover{
	opacity: 0.6;
}
.imgList{
	width:50px;
	height:50px;
}
.wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	margin:1rem;
}
section{
	height: 100%;
	width: 100%;
}
.title{
	margin: 3rem;
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	color: #615d6f;
}
.legend{
	font-size: 20px;
	text-align: center;
	font-weight: 900;
	color: #615d6f;
}
.Boxtitle{
	width:50px;
	height:50px;
}
.Box{
	height: 300px;
}
.Box table{
	width: 600px;
	text-align: center;
}
.Box table, .Box th, .Box td{
	border: 1px solid #544952;
	border-collapse: collapse;
	padding: 0.5rem;
}
.unq{
	font-size: 15px;
	color: #aeb0b2;
}
.Box th{
	background: #837b93;
	color: #fff;
}

.range{
	margin: 0 10px;
	font-size: 20px;
	cursor: pointer;
	
}
.range:hover{
	opacity: 0.6;
}
.Boxrange{
	width: 200px;
	text-align: center;
}
.Boxprev{
	width: 80px;
	text-align: right;
}
.Boxnext{
	width: 80px;
	text-align: left;
}
.Filetitle {
    display: inline-block;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-align: left;
}
.Filetitle:hover{
	opacity: 0.6;
}
.Filetitle a{
	font-weight: 0;
}

.Boxdetail{
	width: 100%;
	text-align:center;
	background: #fff;
	font-size: 12px;
	color: #333;
}
.Boxfile img{
	width: 300px;
	
	
}
/* 말줄임표 */
.target {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
}

 include/topmenu.jsp 

[ OPEN ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>topmenu</title>
</head>
<body>

<nav>
	<ul>
		<li><a href="FileList.do">List</a></li>
		<li><a href="Upload.do">Upload</a></li>
		<li><a href="Main.do">Main</a></li>
	</ul>
</nav>
</body>
</html>

 fileupload/main.jsp 

[ OPEN ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>메인</title>
</head>
<body>
<%@ include file="/include/topmenu.jsp" %>
<section>
<div class="title">* 파일 업로드 메인 *</div>
</section>
</body>
</html>

 fileupload/upload.jsp 

[ OPEN ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css?ver=1">
<script src="script/script.js"></script>
<title>파일 업로드</title>
</head>
<body>
<%@ include file="/include/topmenu.jsp" %>
<section>
<div class="title"> </div>
<div class="wrapper">
<fieldset >
	<legend class="legend">* 파일 업로드 *</legend>
	
	<form class="Boxfile" method="post" action="UploadService.do" enctype="multipart/form-data">
	<!-- 서버에 파일을 보낼것 이라고 알려주기 위해 enctype 옵션에 multipart/form-data 선언해주기 -->
	<table>
		<tr>
		<td>Title : </td>
		<td><input class="input" type="text" name="title"/></td>
		</tr>
		<tr>
		<td>Name  : </td>
		<td><input class="input" type="text" name="name"/></td>
		</tr>
		<tr>
		<td>File  : </td>
		<td><input type="file" name="file"/></td>
		</tr>
		<tr>
		<td colspan="2" class="Boxbtn">
		<Button class="btn" type="submit" >Upload</Button>
		<Button class="btn" type="Button" onclick="location='Upload.do'">Reset</Button>
		</td>
		</tr>
	</table>
	</form>
	
</fieldset>
</div>
</section>
</body>
</html>

 fileupload/list.jsp 

[ OPEN ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="C"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css?ver=1">
<meta charset="UTF-8">
<title>File List</title>
</head>
<body>
<%@ include file="/include/topmenu.jsp" %>
<section>
<div class="title"><img class="Boxtitle" src="images/file2.png"/>
</div>
<div class="wrapper">
	<div class="Box">
	<table>
		<tr>
			<th>No</th>
			<th>Title</th>
			<th>Name</th>
			<th>Date</th>
			<th>hits</th>
		</tr>
		<C:forEach var="i" items="${list }">
			<tr>
				<td class="unq">${i.no }</td>
				<td><a href="FileSelect.do?unq=${i.unq }" class="Filetitle">
				${i.title }</a></td>
				<td><p class="target" style="width:80px">${i.name }</p></td>
				<td><p class="target" style="width:80px">${i.uploadDate }</p></td>
				<td>${i.hits }</td>
			</tr>
		</C:forEach>
	</table>
	</div>
</div>
<div class="wrapper">
<div class="Boxprev">
<C:if test="${paging.start != 1 }">
<a class="range" href="?view=${paging.start-1}">이전</a>
</C:if>
</div>

<div class="Boxrange">
<C:forEach var="status" begin="${paging.start }" end="${paging.end }">
<a class="range" href="?view=${status }">${status }</a>
</C:forEach>

</div>

<div class="Boxnext">
<C:if test="${paging.end < paging.endPage}">
<a class="range" href="?view=${paging.end+1}">다음</a>
</C:if>
</div>
</div>
</section>
</body>
</html>

 fileupload/detail.jsp 

[ OPEN ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="C"%>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css?ver=1">
<meta charset="UTF-8">
<title>File Detail</title>
</head>
<body>
<%@ include file="/include/topmenu.jsp" %>
<section>
<div class="title"> </div>
<div class="wrapper">
<fieldset >
	<legend class="legend">제목 : ${file.title }</legend>
	<div class="Boxdetail">작성자 : ${file.name } ∙ ${file.uploadDate} ∙ 조회수 : ${file.hits }</div>
	<div class="Boxfile">
	<img src="images/${file.fileName }"/>	
	</div>
</fieldset>
</div>
	<div class="Boxbtn">
		<Button class="btn" type="Button" onclick="history.back()">목록으로</Button>
	</div>

</section>
</body>
</html>

 WEB-INF/lib/web.xml 

[ OPEN ]

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaeehttp://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
id="WebApp_ID" version="4.0">
  <display-name>file</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

 WEB-INF/lib 

cos.jar

0.05MB

jstl.jar

0.02MB

mysql-connector-java-8.0.27.jar

2.36MB

standard.jar

0.38MB

테스트업로드 파일

file2.png

0.00MB

---

이렇게 파일 업로드/파일 목록/상세보기를 구현해보았는데요,

다음 글에서는 파일 수정/삭제하는 방법에 대하여  포스팅하도록 하겠습니다.👩🏻‍💻😊