본문 바로가기
[ View ]/JSP

[ JSP ] 파일 업로드

by 환이s 2023. 3. 23.

오늘은 게시판 만들기 전에 파일 업로드 할 때 필요한 기능에 대해서 알아보겠습니다.

 

 

■  파일 업로드

 

 jsp에는 파일 업로드 기능이 기본적으로 포함되어 있지 않으므로 외부 라이브러리를 사용해야 합니다.

 

 

해당 라이브러리 다운로드하는 곳은 http://www.servlets.com/cos/ 웹 페이지 들어가셔서 하단에 위치한 zip 파일을 다운로드하셔서 압출을 푼 후에 폴더 \cos-22.05\lib\cos.jar 를 이클립스 해당 프로젝트의 WEB-INF/lib에 복사하시면 됩니다.

 

 


 

파일 업로드 방법

 

파일을 업로드하는 방법은 크게 2가지가 있습니다.

 

- 파일을 테이블의 blob 칼럼에 직접 저장하는 방식

(DB 손상 시 파일도 삭제됩니다. InputStream, OutputStream을 써야 한다. )

 

- 파일 정보만 테이블에 저장하고 실제 파일은 디렉터리에 저장하는 방식

(테이블과 물리적 디렉터리를 둘 다 관리해야 한다.)

 

 

파일 업로드용 객체( MultipartRequest )

 

지금까지 포스팅에서 request 객체를 활용했습니다. 그렇다면 파일 업로드 할 때도 request 객체를 써야 하는가?

 

아닙니다. request를 확장한 객체로 MultipartRequest 객체가 있습니다.

 

MultipartRequest

COS 라이브러리에서 가장 핵심적인 역할을 합니다.

파일 업로드를 직접적으로 담당하는 객체이며, 파일 업로드를 담당하는 생성자 및 여러 메서드를 포함하고 있습니다.

또한 안정성이 다른 파일 업로드 라이브러리보다 뛰어나며, 파일 중복 처리의 경우도 파일 중복 처리 인터페이스를 가지고 있기 때문에 쉽게 중복처리가 가능합니다.

 

그렇다면 어떻게 사용해야 할까.. 아래 생성자를 참고해 봅시다.

new MultipartRequest(request, "업로드 디렉터리", 제한용량, 인코딩방식, 파일명중복방지처리옵션)

 

파일 중복 시 처리 방법

 

흔히 파일을 다운로드를 하면 중복된 파일을 다운로드할 때가 있습니다. 그럴 때 어떻게 처리가 되었나요?

보통 TEST(1), TEST(2) 이렇게 숫자로 업로드 처리되는 걸 볼 수 있습니다.

하지만 숫자로 처리하는 방법 말고도 한 가지 더 있습니다.

 

아래 글을 참고해 봅시다.

 

  • 업로드 시간 값으로 처리(타임스탬프)

 

- A사람: 타임스탬프_test.txt 업로드

- B사람: 타임스탬프_test.txt 업로드

 

  • 숫자로 처리

 

-A사람: test(1).txt 업로드

-B사람: test(2).txt 업로드

 

 

그럼 예제를 통해서 알아봅시다.

파일 중복은 숫자로 처리하며, MultipartRequest 객체가 제공해 주는 메서드를 하나씩 알아봅시다.

 


■  파일 업로드 예제

 

예제로는 입력, 출력 페이지 두 페이지를 활용하는데, 보통 WEB 환경에서 사용자의 입력 값을 다른 페이지로 이동시키기 위해서는 Form 태그를 통한 데이터를 전송을 하게 됩니다.

 

<입력 페이지>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>uploadTest</title>
<script src="../include/jquery-3.6.3.min.js"></script>
<%@ include file="../include/header.jsp" %>
</head>
<body>
<h2>파일 업로드 테스트</h2>
<!-- 파일업로드시 반드시 post방식, enctype="multipart/form-data"가 꼭 포함되어야 함 -->
<form name="form1" method="post" enctype="multipart/form-data" action="upload_result.jsp">
이름 : <input name="name"> <br>
제목 : <input name="subject"> <br>
파일1 : <input type="file" name="file1"> <br>
파일2 : <input type="file" name="file2"> <br>
<input type="submit" value="업로드">
</form>

</body>
</html>

주의할 점은 파일 업로드 시  enctype="multipart/form-data 코드가 포함되어야 합니다.

 

enctype데이터를 전송하게 될 타입을 지정하는 부분입니다.

아래쪽 input 태그 타입을 "file" 타입으로 지정했는데 이 부분은 파일을 선택할 수 있는 창이 띄워주는 역할을 합니다.

 

출력 페이지에서는 MultipartRequest 객체의 메서드를 활용해서 파일의 이름, 크기를 출력합니다.

 

<출력 페이지>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%@ page import="com.oreilly.servlet.*" %>
<%@ page import="com.oreilly.servlet.multipart.*" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../include/jquery-3.6.3.min.js"></script>
<%@ include file="../include/header.jsp" %>
</head>
<body>
<%
//파일 업로드를 위한 디렉토리 설정
//윈도우즈 c:\\, 유닉스(리눅스)는 c:/ (디렉토리라는 개념만 있고 드라이버는 없다.)
String upload_path="c:\\upload";
//파일 업로드 최대 사이즈 설정
int size=10*1024*1024; //byte단위(10MB)
String name="";
String subject="";
String filename="", filename2="";
int filesize=0, filesize2=0;
try{
	//MultipartRequest : request를 확장한 객체
	//MultipartRequest(request,"업로드 디렉토리",제한용량,
	//		"인코딩방식",파일명중복방지처리옵션)
	MultipartRequest multi=new MultipartRequest(request,upload_path,size,
			"utf-8",new DefaultFileRenamePolicy());
	name=multi.getParameter("name");//request.getParameter와 같음
	subject=multi.getParameter("subject");
	Enumeration files=multi.getFileNames();//파일이름을 가져옴
	String file1=(String)files.nextElement();//클라이언트 파일이름
	String file2=(String)files.nextElement();
	filename=multi.getFilesystemName(file1);//서버에 업로드된 파일 이름
	File f1=multi.getFile(file1);//File : 파일의 정보를 참조
	filesize=(int)f1.length();//파일의 사이즈(정수)
	
	filename2=multi.getFilesystemName(file2);
	File f2=multi.getFile(file2);
	filesize2=(int)f2.length();
}catch(Exception e){
	e.printStackTrace();
}
%>
이름 : <%= name %> <br>
제목 : <%= subject %> <br>
파일1 이름 : <%= filename %> <br>
파일1 크기 : <%= filesize %> <br>
파일2 이름 : <%= filename2 %> <br>
파일2 크기 : <%= filesize2 %> <br>

</body>
</html>

위 파일의 해당 경로 디렉터리를 지정하고 입력 페이지에서 실행시키고 파일을 전송해 봅시다. 

전송할 파일은 저는 PDF, XLS 파일을 전송했습니다. 실행이 되었다면 아래와 같은 결과가 나오게 됩니다.

 

 

파일의 이름과 크기 값이 제대로 출력되는 걸 확인했습니다.

마지막으로 경로 설정했던 upload 디렉터리를 확인하고 포스팅을 마치겠습니다.

 


마치며

 

오늘은 파일 업로드 방법 및 객체에 대해서 알아보았습니다.

다음 포스팅에서 뵙겠습니다.

728x90