본문 바로가기
  • 실행력이 모든걸 결정한다
Spring 사전 준비/JSP Servlet

[JSP Servlet] 서버에 파일 업로드하고 확인하기

by 김코더 김주역 2020. 12. 6.
반응형

1. 설치

웹상에서 파일을 업로드 하는 기능을 구현하기 위해 라이브러리를 설치 해야 한다.

 

다운로드를 하기 위해 해당 사이트에 들어가자

servlets.com/cos/

 

Servlets.com | com.oreilly.servlet

 

servlets.com

 

밑에 조금 내려보면 Download 가 있을 텐데, 여기서 zip 파일을 다운 받아주면 된다.

 

그리고 적당한 위치에 압축을 풀어주고, 그 후 생성된 폴더의 lib 하위 디렉토리에 cos.jar 이 있을 것이다.

이를 복사해서,

 

여러분들의 프로젝트의 WebContent/WEB-INF/lib 에 넣어주면 된다.

 

 

 

2. 업로드 파일을 저장할 폴더 생성

프로젝트 폴더의 WebContent 안에서 "uploadedFiles" 라는 폴더를 직접 생성해주었다.

이렇게 폴더를 생성해주면, 

 

tomcat 상에서도 똑같은 이름의 폴더가 생성된 것을 확인할 수 있다. 업로드된 파일은 여기에 담긴다.

생성되지 않았다면 톰캣 서버를 한번 실행하고 다시 확인해보자.

 

 

 

3. 코딩

 

원하는 파일을 선택하고 Upload(submit) 버튼을 눌렀을 때 해당 파일이 잘 업로드 되는지 확인해보자.

 

<uploadtest1.jsp>

 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<form action="uploadCheck.jsp" method="post" enctype="multipart/form-data">
		<input type="file" name="file"><br>
		<input type="submit" value="Upload">
	</form>
</body>
</html>

 

[코드 설명]

파일을 선택할 수 있게 input의 type속성으로 "file"을 주었다.

그리고 enctype는 데이터의 인코딩 방식인데, method속성이 POST일 때 사용이 가능하다.

enctype속성을 "multipart/form-data" 로 지정해준 것은, 모든 문자를 인코딩 하지 않음을 명시한다는 의미이고 주로 파일이나 이미지를 서버로 전송할 때 사용한다.

 

 

-파일 선택-

 

 

 

이제 해당 파일을 받아서 서버 폴더에 업로드하는 코드를 살펴보자.

 

<uploadCheck.jsp>

 

<%@page import="com.oreilly.servlet.multipart.DefaultFileRenamePolicy"%>
<%@page import="java.util.Enumeration"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
    String path = request.getRealPath("uploadedFiles");
    int size = 1024 * 1024 * 20; //20MB
    String str, filename, original_filename;
    try{
    	MultipartRequest multiRequest = new MultipartRequest(request, path, size, "EUC-KR", new DefaultFileRenamePolicy());
    	
    	Enumeration files = multiRequest.getFileNames();
    	str = (String)files.nextElement();
    	filename = multiRequest.getFilesystemName(str);
    	original_filename = multiRequest.getOriginalFileName(str);
    	
    	System.out.println("str : "+str);
    	System.out.println("filename : "+filename);
    	System.out.println("original_filename : "+original_filename);
    } catch (Exception e){
    	e.printStackTrace();
    }
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	SUCCESS!!!
</body>
</html>

 

[코드 설명]

본인의 경우 uploadedFiles 폴더와 uploadCheck.jsp 파일은 같은 디렉토리에 두었다.

다른 디렉토리에 있다면 getRealPath의 인자에 ../나 /를 추가해서 반드시 상/하위 디렉토리를 명시하여야 한다.

MultipartRequest는 multipart/form-data request를 처리하기 위한 객체이다.

MultipartRequest의 3번째 인자는 size인데 미리 최대 20MB 파일 까지 허용하도록 선언 했다.

그리고 getFilesystemName, getOriginalFileName 메소드가 반환하는 String은 실제 이름인가 아닌가의 차이인데, 만약 동일 이름으로 파일이 저장되었을 경우에는 MultipartRequest의 5번째 인자인 DefaultFileRenamePolicy 에 의하여 파일 이름 뒤에 숫자를 추가로 붙여 중복을 방지해준다. 파일 이름이 유일하다면 두 메소드의 반환 문자열은 동일할 것이다.

 

이를 확인하기 위해 같은 파일을 2번 업로드 해보았다.

 

뒤에 1이 붙어서 같이 저장된 모습이다.

 

 

 

4. 서버에 업로드된 파일에 접근하기 (byson님의 포스팅)

해당 내용은 필자의 호기심으로 추가로 검색을 해보았다.

서버에 저장된 파일을 <img> 태그의 src=[URL] 로 불러오거나, 브라우저 URL로 직접 확인하려면 server.xml 파일에서 context를 등록해야 한다고 한다.

이 방법을 잘 설명해준 블로거의 포스팅 링크를 남겨두겠다.

 

(byson님께 감사드립니다)

byson.tistory.com/20

 

파일업로드 경로 프로젝트 폴더 외부에 두기 - server.xml context 등록

파일업로드 경로 프로젝트 폴더 외부에 두기 - server.xml context 등록 * 문제 - 포트폴리오 작업 중에 로컬에서 개발서버로 war 파일 배포 함.(개발서버에 있던 배포본을 지우고 새로 배포됨) 이 때

byson.tistory.com

 

 

 

 

 

 

반응형

댓글