[JSP] cos library를 활용한 파일 업로드/다운로드

🔻파일 업로드/다운로드

브라우저와 웹서버간의 파일 복사하는 과정이다.

업로드는 클라이언트의 자원이 서버 측으로 복사되는 과정이고, 다운로드는 서버의 자원이 클라이언트 측으로 복사되는 과정이라고 볼 수 있다.

 

파일 업로드/다운로드 할 때 입출력스트림이 필요한데 그 입출력스트림 기능을 간편하게 제공해 주는 라이브러리인 cos library가 있다.

 

🔻cos library 설치

파일 업로드 라이브러리

 

http://servlets.com/

Servlets.com

 

COS File Upload Libaray

사이트 좌측 COS File Upload Libaray를 선택한다.

 

 

다운로드

cos-22.05.zip

0.25MB

 

페이지 하단 Download의 Version에 있는 압출파일을 클릭하여 다운로드 받는다.

 

압축 해제

압축 해제 후 jar 파일을 프로젝트와 연결을 해야한다.

 

라이브러리 연결

방법1. Bulid Path

 

다운로드 받은 파일을 압축을 풀고 압축 해제된 폴더 속 lib > cos.jar를 프로젝트에 Bulid Path를 한다.

 

 

 

★방법2. webapp > WEB-INF > lib > cos.jar 복사

다이나믹 웹 프로젝트만 가능한 아주 간단한 방법이 있다.

WEB-INF폴더 아래 lib폴더를 생성하여 복사·붙여넣기로 저장한다.

 

이로써 서버 프로젝트와 cos library 연결이 완료되었다.

 

업로드 파일 전용 폴더 생성

또한, webapp 폴더 아래 files 폴더를 생성하여 업로드한 파일을 저장할 전용 폴더를 만들어 준다.

필수적이진 않지만 전용 폴더를 지정하지 않으면 파일 관리가 지저분해진다.

 

 

🔻파일 업로드 설정

• ex16.jsp : 파일 전송 클래스
• ex16_ok.jsp : 파일 수신 클래스

ex16.jsp

	<form method="POST" action="ex16_file_ok.jsp" enctype="multipart/form-data">
		<input type="file" name="attach">
	</form>

1. <input type="file">

• 일반적으로 파일 첨부에는 file type의 input 태그를 사용한다.

2. <form method="POST>

• GET 방식은 데이터가 너무 길면 잘릴 수 있기때문에 POST 방식으로 설정한다.

3. <form enctype="multipart/form-data">

• a. application/x-www-form-urlencoded (기본값) : 문자열 데이터를 전송하겠다.
• b. multipart/form-data : 문자열과 비문자열을 동시에 전송하겠다.

 

<form enctype="multipart/form=data">을 적용하여 인코딩 방식을 변경하면
request.getParameter() , request.getParameterValues()  동작 하지 않는다.

ex16_ok.jsp

<%
	String name = request.getParameter("name");
	String age = request.getParameter("age");
%>

request.getParameter 가 동작하지 않아 name, age를 출력하면 null값이 출력된다.

따라서, cos.jar 파일이 MultipartRequest 클래스의 객체가 request의 수신기능을 대신한다.

 

 

로컬경로

이전에 webapp 폴더 아래 files 폴더를 생성하여 전용 폴더를 만들어 주었는데 이에 대한 로컬 경로가 필요하다.

<%
	String path = application.getRealPath("/files");
%>

위 코드는 웹에서 쓰는 상대경로나 절대경로를 로컬 경로로 변환해준다.

'C:\class\code\server\JSPTest\src\main\webapp\files' 의 경로를

'C:\class\code\server\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\JSPTest\files' 로 바꿔준다.

(본인의 프로젝트 경로에 따라 해당 위치는 달라질 수 있음)

 

getRealPath() 메서드는 서블릿 컨텍스트의 실제 파일 시스템 경로를 얻어온다.
/files는 경로를 나타낸다.  '/'는 webapp 폴더를 의미하며 그 아래에 있는 files 디렉터리를 가리킨다.

 

프로젝트 내 wtpwebapps 폴더 안에 실제로 실행되는 폴더를 만들어두었다. 이 폴더를 실행 폴더라고 하며, 실제 운영 중인 작업 위치이므로, 파일을 업로드하면 이곳의 files 폴더에 복사본으로 저장된다.

 

 

파일 최대 사이즈 지정

<%
	int size = 1024*1024*100;	//100MB
%>

size 변수에 업로드할 파일의 최대 사이즈를 지정해준다.

바이트 단위로써 

 

 

MultipartRequest

• cos library 에는 MultipartRequest라는 클래스가 있다. cos library에서 가장 중심적인 역할을 하는 클래스이다. 
• 주요 특징은 파일업로드를 비롯해 파일 중복 처리 인터페이스를 제공한다.
• 또한, 업로드된 파일을 관리하고 서버의 특정 위치에 저장한다.

ex16_ok.jsp

<%
	String name="";		
	String age="";			
	String filename="";		
	String orgfilename="";
	
	try {
    		//1. 파일 업로드 처리
		MultipartRequest multi = new MultipartRequest(
									request,
									path,		
									size,		
									"UTF-8",	
									new DefaultFileRenamePolicy()
				);
		
        	//2. 데이터 수신
		name = multi.getParameter("name");
		age = multi.getParameter("age");
		
		//3. 파일 정보 가져오기
		filename = multi.getFilesystemName("attach");		
		orgfilename = multi.getOriginalFileName("attach");
		
	} catch(Exception e) {
		e.printStackTrace();
	}
%>

외부 파일 입출력을 하기에 try-catch 문으로 에러를 제어한다.

1. 파일 업로드 처리

• MultipartRequest 객체를 만드는 순간 이미 첨부파일은 files에 복사가 완료된다.
• request : 원래 request
• path : 파일 업로드 위치
• size : 위에서 지정한 최대 파일 크기
• "UTF-8" : 파일 데이터 인코딩
• new DefaultFileRenamePolicy() : 파일명이 중복될 경우 자동으로 파일명을 변경하는 넘버링 작업

2. 데이터 수신

• ex16.jsp 데이터 작성 및 송신한 폼에서 데이터를 받아온다.

3. 파일 정보 가져오기

• getFilesystemName : 파일이 저장된 실제 이름 
• getOriginalFileName : 사용자가 올렸던 원본 이름 
• 업드한 파일명이 files 폴더 내에서 중복 될 경우, DefaultFileRenamePolicy 으로 넘버링 되어 저장되므로 내가 올린 실제 파일명과 저장되는 파일명을 다를 수 있다.

 

파일 저장 방법

등록하기를 눌렀을 때 데이터를 수신 받은 폼에서 파일을 어떻게 저장할지 세가지 방법이 있다.

 

1. 뷰어

아래 코드의 장점은 코드 작성이 간단하다는 것이고 단점은 파일 확장자 마다 다운로드되거나 뷰어로 뜰 수도 있다.

ex16_ok.jsp

<a href="/jsp/files/<%= filename %>"><%= orgfilename %></a>

 

2. download

download는 모든 파일을 무조건 다운로드 시키는 옵션이다.
아래 코드의 장점은 코드 작성이 간단하다는 것이고, 단점은 넘버링된 파일은 파일명이 달라지는 것이다.

이전에 susukkang.png 파일을 등록해서 파일명 뒤에 넘버링되어 susukkang1.png가 되었다.

download 옵션은 넘버링된 파일명 그대로 저장한다.

ex16_ok.jsp

<a href="/jsp/files/<%= filename %>" download><%= orgfilename %></a>

 

 

3. download.jsp 모듈 활용(참조)

미리 작성된 jsp 파일을 활용한다.

원본 파일명으로 다운도드가 되나, 각 옵션에 맞게 작성하려면 코드 작성하는 비용이 드는 단점이 있다.

 

download.jsp

0.00MB

ex16_ok.jsp

<a href="download.jsp?filename=<%= filename %>&orgfilename=<%= orgfilename %>"><%= orgfilename %></a>

 

---

🔻전체 코드

ex16.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex16_file</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
</head>
<body>
	<h1>파일 업로드</h1>

	<form method="POST" action="ex16_file_ok.jsp" enctype="multipart/form-data">
		<table class="vertical">
		 <tr>
		 	<th>이름</th>
		 	<td><input type="text" name="name"></td>
		 </tr>
		 <tr>
		 	<th>나이</th>
		 	<td><input type="number" name="age" min="1" max="100"></td>
		 </tr>
		 <tr>
		 	<th>파일</th>
		 	<td><input type="file" name="attach"></td>
		 </tr>
		</table>
		<div>
			<input type="submit" value="등록하기">
		</div>
	</form>

	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
</body>
</html>

 

ex16_ok.jsp

<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	request.setCharacterEncoding("UTF-8");
	
	String path = application.getRealPath("/files");
 
	int size = 1024*1024*100;	//100MB
	
	String name="";			//이름
	String age="";			//나이
	String filename="";		//첨부파일명
	String orgfilename="";	//첨부파일명
	
	try {
		MultipartRequest multi = new MultipartRequest(
									request,	//원래 request
									path,		//파일 업로드 위치
									size,		//최대 파일 크기
									"UTF-8",	//파일 데이터 인코딩
									new DefaultFileRenamePolicy()
				);
		
		name = multi.getParameter("name");
		age = multi.getParameter("age");
		
		filename = multi.getFilesystemName("attach");		//파일명(저장된 파일명)
		orgfilename = multi.getOriginalFileName("attach");	//파일명(원본 파일명)
		
	} catch(Exception e) {
		e.printStackTrace();
	}
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex16_file_ok</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
</head>
<body>

	<h1>결과</h1>

	<div>
		이름: <%= name %>
	</div>
	<div>
		나이: <%= age %>
	</div>
	<div>
		파일명: <%= filename %>
	</div>
	<div>
		파일명: <%= orgfilename %>
	</div>
	
	<h2>파일 다운로드</h2>
	
	<%-- <div>
		<a href="/jsp/files/<%= filename %>"><%= orgfilename %></a>
	</div> --%> 
	
	<%-- <div>
		<a href="/jsp/files/<%= filename %>" download><%= orgfilename %></a>
	</div>  --%>

	<div>
		<a href="download.jsp?filename=<%= filename %>&orgfilename=<%= orgfilename %>"><%= orgfilename %></a>
	</div>
	
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
	
</body>
</html>

 

 

---

🔻다중 파일 업로드/다운로드

• 단일 파일 업로드 및 다운로드 방법과 99% 같다. 단, 파일 이름을 여러개 저장이 필용하여 ArrayList를 사용하는 점이 다르다.
• ex17.jsp : 파일 업로드 클래스
• ex17_ok.jsp : 파일 다운로드 클래스

 

ex17.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex17</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
</head>
<body>

	<h1>다중 파일 업로드</h1>

	<form method="POST" action="ex17_ok.jsp" enctype="multipart/form-data">
		<table class="vertical">
			<tr>
				<th>파일1</th>
				<td><input type="file" name="attach1"></td>
			</tr>
			<tr>
				<th>파일2</th>
				<td><input type="file" name="attach2"></td>
			</tr>
			<tr>
				<th>파일3</th>
				<td><input type="file" name="attach3"></td>
			</tr>
		
		</table>
		<div>
			<input type="submit" value="업로드">
		</div>
	
	</form>

	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
</body>
</html>

 

ex17_ok.jsp

<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	String path = application.getRealPath("/files");
	int size = 1024*1024*100;	//100MB

	ArrayList<String> filename = new ArrayList<String>();
	ArrayList<String> orgfilename = new ArrayList<String>();

	try {
		MultipartRequest multi = new MultipartRequest (
					request,
					path,
					size,
					"UTF-8",
					new DefaultFileRenamePolicy()
				);
		
		//다중 파일명을 컬렉션에 할당하기
		filename.add(multi.getFilesystemName("attach1"));
		filename.add(multi.getFilesystemName("attach2"));
		filename.add(multi.getFilesystemName("attach2"));
		
		orgfilename.add(multi.getOriginalFileName("attach1"));
		orgfilename.add(multi.getOriginalFileName("attach2"));
		orgfilename.add(multi.getOriginalFileName("attach3"));
		
	} catch (Exception e) {
		e.printStackTrace();
	}
	
%>    
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex17_ok</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
</head>
<body>

	<h1>다운로드</h1>
	
	<% for(int i=0; i<3; i++) { %>
		<div><a href="download.jsp?filename=<%= filename.get(i) %>&orgfilename=<%= orgfilename.get(i)%>"><%= orgfilename.get(i)%></a></div>
	<%} %>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
</body>
</html>

파일명을 다중으로 저장하기 위해 ArrayList를 사용했다.

add를 통해 파일명을 추가하고

get를 통해 파일명을 출력하였다.