웹에서 파일 업로드 구현하기-2

웹에서 파일 업로드 구현-2 (JSP)

웹에서 파일 업로드 구현하기-1

(지난 포스팅에서 이어짐)

지난 포스팅에서 사용자가 입력한 정보와 파일정보를 DB에 업로드하는 과정까지 성공했는데

메소드를 통해 반환되어 request 영역객체에 올려놨던 List를 꺼내보자.

위와 같은 형식의 테이블에 차례로 정보를 출력해줄 것이다.

지난 포스팅에서 마지막으로 전송과 DB업로드에 성공하면 이동하게 만들었던 Board.jsp에 아래 코드를 추가해서 테이블 모양을 만든다.

Board.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>

<html>

<head>

<title>Insert title here</title>

table,td{

border:1px solid black;

border-collapse: collapse;}

</style>

</head>

<body>

<tr>

<td>Title</td>

<td>Author</td>

<td>FileName</td>

</tr>

</table>

</body>

</html>

틀이 완성되었으니 실제로 값을 꺼내오자.

SelectService.java

if(list!=null) {

request.setAttribute("list", list);

}else {

System.out.println("비었습니다");

}

System.out.println("됨??????????????????");

RequestDispatcher dis = request.getRequestDispatcher("Board.jsp");

dis.forward(request, response);

성공하면 request 영역에 list를 올리고, forward 방식으로 Board.jsp에 전달하게 하였으므로

JSTL과 EL식을 이용하여 리스트 안에 FileVO 객체가 존재할 때마다

새로 <tr> 태그와 <td>태그를 만들어 기존 테이블에 붙이는 방법을 사용한다.

JSTL을 사용하기 위해 먼저 이전 포스팅에서 언급했던 jstl.jar와 standard.jar파일이 lib폴더 안에 추가되어있나 확인하고

<%@ taglib uri="http://java.sun.com/jsp/jstl/core"; prefix="c"%>

이 코드를 Board.jsp 상단에 추가해주자. (JSTL 포스팅 참고)

Board.jsp (<table> 태그 안에 아래 JSTL문을 추가한다)

<table>

<tr>

<td>Title</td>

<td>Author</td>

<td>FileName</td>

</tr>

<c:forEach items="${list}" var="i">

<tr>

<td>${i.title }</td>

<td>${i.author }</td>

</tr>

</c:forEach>

</table>

이제 Upload.html 로 돌아가 다시 업로드해보면

지금까지 추가했던 정보들이 출력된 것을 볼 수 있다. (시퀀스넘버는 테스트하느라 올라간 것임)

이제 내가 지금까지 업로드한 목록을 전부 보여주는 것에서

파일이름을 클릭하면 넘버를 통해 하나의 객체에 대한 정보를 크게 뿌려주는 기능을 추가할 것이다.

과정은

-Board.jsp에서 보여주는 테이블에서 FileName을 클릭하면 get방식으로 Num값을 넘기고

-SelectOne.java 서블릿에서 Num값을 받아 DB에서 Num값을 통해 해당 정보를 꺼내온 후 다시 FileVO 객체에 정보를 담아 Request영역에 저장한 후, 정보를 보여주기 위한 View.jsp로 이동한다.

-View.jsp에서는 EL식을 이용해 조회한 해당 정보를 출력해준다.

첫번째 과정을 위해 Board.jsp에서 다음과 같이

<c:forEach items="${requestScope.list}" var="i">

<tr>

<td>${i.title }</td>

<td>${i.author }</td>

</tr>

</c:forEach>

<a>태그를 통해 쿼리스트링 방식으로 num값을 SelectOne.java 서블릿에 넘긴다.

SelectOne.java 서블릿을 만들고 넘어온 num값을 변수에 담는다.

request.getParameter()메소드의 리턴은 String이므로 Int형으로 변환해준다.

int num = Integer.parseInt(request.getParameter("num"));

DB에 접근하기 위해 FileDAO 객체를 만들고

FileDAO에 DB에서 하나의 값을 조회할 SelectOne()메소드를 만들어 FileVO객체형으로 리턴해줄 것이다.

FileDAO dao = new FileDAO();

FileVO vo = dao.SelectOne(num);

FileDAO.java에 추가

public FileVO SelectOne(int num){

getConnection();

//코드생략

close();

return null;

}

성공적으로 조회하여 FileVO에 정보가 담겼으면

SelectOne.java 서블릿에서 메소드호출을 통해 받아낸 FileVO가 null값이 아닐 때 request영역에 vo값을 저장하고

View.jsp로 이동하게 한다.

try {

FileVO vo = dao.SelectOne(num);

if (vo != null) {

request.setAttribute("vo", vo);

} else {

System.out.println("조회실패..");

}

RequestDispatcher dis = request.getRequestDispatcher("View.jsp");

dis.forward(request, response);

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

}

View.jsp에서는 EL식을 이용하여 받아온 객체정보를 보여준다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>

<html>

<head>

<title>Insert title here</title>

table, td {

border: 1px solid black;

border-collapse: collapse;

}

</style>

</head>

<body>

<table>

<tr>

<td>${requestScope.vo.num}</td>

</tr>

<tr>

<td>${requestScope.vo.title}</td>

</tr>

<tr>

<td>${requestScope.vo.author}</td>

</tr>

<tr>

<td>${requestScope.vo.day}</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

지난 포스팅에 언급한 것처럼 우리가 보는 Upload 폴더에는 실제로 업로드한 파일이 들어있지 않지만

메타데이터 안에 저장이 되어있기 때문에 <img>태그 안에 경로를 지정해주고 파일네임을 써주게 되면 출력이 되게 된다.

Upload.html에서 업로드를 하고

업로드가 완료되어 지금까지 업로드했던 리스트가 나오게 되고, 파일네임을 클릭하면

메타데이터에 저장된 우리가 업로드한 실제 이미지를 볼 수 있게 된다.

참고)

메모리절약을 위해 FileDAO에 아래 코드를 추가하고 :

(한번만 객체를 생성하기 위해 static으로 선언한 뒤 FileDAO객체를 얻어오기 위한 메소드 추가)

private static FileDAO instance = new FileDAO();

public static FileDAO getInstance() {

return instance;

}

일일이 FileDAO 객체를 만들었던 코드를

FileDAO dao = new FileDAO();

아래와 같이 static 영역에 올려진 객체를 메소드로 얻어와 매번 객체를 생성하지 않고 메모리를 절약하는 것이 싱글톤 패턴이다.

FileDAO dao = FileDAO.getInstance();

포스팅에 사용한 소스코드 :

Web-Content:

src-com.Model:

src-com.Service:

저작자표시 비영리 동일조건

저장소

웹에서 파일 업로드 구현하기-2

티스토리툴바

웹에서 파일 업로드 구현하기-2

'Java' Related Articles

티스토리툴바