내 블로그 목록

2018년 7월 21일 토요일

[JSP] 일간 뷰어 인터뷰_파일 업로드편

파일업로드 편

Q. 파일 업로드를 하기 위해 따로 셋팅해야 하는 부분이 있는가?


파일업로드를 하기 위해서는 라이브러리들을 추가해야한다. 구체적으로, 이클립스 WebContent - WEB-INF의 lib에 라이브러리들을 추가한다.


사용할 라이브러리들은 다음과 같다.


  1. http://commons.apache.org/proper/commons-fileupload/ 에 접속해서 commons-fileupload-1.3.3.jar를 다운 받는다.
commons-io-2.5.jar를 다운 받는다


다운로드가 완료되었으면, 위에 적힌 이름의 jar 파일을 lib에 추가한다.

Q. 파일 업로드 하는 방법을 알려달라. 이론이 아닌 구체적인 코드 위주로. 파일을 업로드 하는 방법은
이론보다도 코드 위주로 설명하는 것이 이해가 빠를 것 같다.


알았다.


우리가 하고자 하는 것은


  1. 첨부 파일 폼을 만들어 파일과 파일의 제목을 받는다.
  2. 이를 pc에 저장한다.
  3. PC에 저장한 파일을 불러와 화면에 출력한다.


이것이다. 먼저 밑에 적어놓은 코드를 실행했을 때 나오는 결과를 보여주겠다.


(1)
(2)


구체적인 코드는 다음과 같다.


fileUploadForm.jsp : 첨부 파일 및 파일 이름을 받을 폼 페이지.
upload.jsp: fileUploadForm.jsp에서 받은 첨부파일을 처리하는 페이지이다.
이 페이지가 구체적으로 하는 일을 나열해 보자면,
(1)첨부 파일을 업로드하고 (2)이를 PC에 저장하며 (3) html로 사진을 출력하는 페이지.

(0).[fileUploadForm.jsp]


첨부 파일을 받고, 파일이름을 지정할 폼을 만든다.
이때 <form>태그 안에 ‘method=”post” enctype=”multipart/form-data”’를 필수 입력해야한다.


<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
 
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
</style>
</head>
<body>
<h1>파일업로드</h1>
<!-- form에 method="post" enctype="multipart/form-data를 필수 입력해야한다. -->
<form action="upload.jsp" method="post" enctype="multipart/form-data">
<input type="text" name="name">
<input type="file" name="photo">
<br>
<input type="submit">
</form>
</body>
</html>



[upload.jsp]


fileUploadForm.jsp에서 받은 파일을 본격적으로 처리할 처리 파일이다.


<%@page import="java.io.File"%>
<%@page import="java.util.Iterator"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>

<%
/* (1) fileUploadForm.jsp에서 받은 파일을 업로드 해보겠습니다. */
String imgName = ""; //업로드파일 저장을 위해 사용하는 변수


// 1. multipart/form-data 여부 확인
boolean isMultipart = ServletFileUpload.isMultipartContent(request);


//multpart가 존재 한다면,
if(isMultipart){
// 2. 메모리나 파일로 업로드 파일 보관하는 FileItem의 Factory 설정
DiskFileItemFactory factory = new DiskFileItemFactory();
// 3. 업로드 요청을 처리하는 ServletFileUpload 생성
ServletFileUpload upload = new ServletFileUpload(factory);
// 4. 업로드 요청 파싱해서 FileItem 목록 구함*
List<FileItem> items = upload.parseRequest(request);
Iterator<FileItem> iter = items.iterator();
while(iter.hasNext()){
FileItem item = iter.next();
//파일인지 여부 확인 : isFormFiled() -> type=file 이외의 폼 데이터 인지 확인
//파일이 아니라면,(그럼 text 폼이겠지)
if(item.isFormField()){
String name = item.getFieldName();
String value = item.getString("utf-8");
System.out.println("일반 폼 필드 : " + name +" - " + value);
//파일이라면,
}else{
String name = item.getFieldName();
String fileName = item.getName();
String contentType = item.getContentType();
boolean isInMemory = item.isInMemory();
long sizeInBytes = item.getSize();
System.out.println("파일 이름 : " + fileName);

        /*(2) 업로드한 파일을 저장해보겠습니다. */
//저장하고자 하는 파일의 이름. 구별을 쉽게 하기 위해 이름 재정의 하는 부분이다.
imgName = "cool_" + fileName;
//웹서비스에서 사용되는 저장 경로
String uploadUri = "/file/photo";
//물리적인 경로(실제 경로)
String dir = request.getSession().getServletContext().getRealPath(uploadUri);
System.out.println(uploadUri +" 의 물리적 경로 : " + dir); //경로 확인
//데이터 저장
//write() 메서드 안에는 File 타입이 들어 가야한다는 것을 명시하라.
item.write(new File(dir, imgName));
//imgName은 들어가야 하는 파일 이름이다.
}
}
}
%>   
 
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
</style>
</head>
<body>


<!-- (3) 앞서 저장했던 첨부 파일(이미지 파일)을 출력해보도록 합니다.-->
<!-- imgName 변수를 밖으로 뺀 이유는 경로를 확인하기 위해였다.  -->
<img alt="사진" src="file/photo/<%=imgName%>">


</body>
</html>

댓글 없음:

댓글 쓰기