파일 업로드
- 단순한 텍스트를 전송하는 것이 아닌 바이너리 형태의 파일을 업로드 합니다.
- 자료실 형태의 폼 학습입니다.
1. 파일 업로드를 위한 기본적인 폼 형태
- form태그 속성들 중 input type="file" 은 파일을 선택할 수 있는 창을 만듭니다.
- form 태그의 method와 enctype을 지정합니다.]
<form name = "formName" method="post" enctype="multipart/form-data">
<input type = "file" name="selectfile">
- 파일 선택 페이지 작성
<html>
<body>
<form name="frmName" method="post" enctype="multipart/form-data"
action="ViewPage.jsp">
user<br>
<input type="text" name="user"><br>
title<br>
<input type="text" name="title"><br>
file<br>
<input type="file" name="uploadFile"><br>
<input type="submit" value="UPLOAD"><br>
</form>
</body>
</html>
- 위에 페이지에서 폼을 전송할 때 request 객체로 파라미터의 값을 얻어낼수 없습니다.
- enctype="multipart/form-data로 전송한 폼에 담겨진 파라미터들에 대한 값을 얻어내기 위해,
파일 찾기로 파일을 서버상의 한 폴더에 업로드 하기 위해 특별한 컴포넌트 필요합니다.
- www.servlets.com에서 제공하는 cos.jar파일은 필요한 컴포너트 제공합니다.
- cos-05Nov2002.zip 파일을 다운로드후 압축해제합니다.
2. 파일을 업로드하고 폼 데이터를 분석하는 도구 cos.jar
- lib폴더 밑의 cos.jar 파일 설정하기
★ c:\tomcat-5.0.19\common\lib
- 어플리케이션 폴더에 업로드 되는 파일들이 저장될 폴더를 만듭니다. 폴더 이름은 자유롭게 사용
2. 파일 업로드 및 폼 요소 처리를 위한 MultipartRequest 클래스
- MultipartRequest의 생성자
. 한글 인코딩, 업로드 파일 중복의 해결
MultipartRequest multi = new MultiPartRequest(request, folderDirectory,1024*10,"euc-kr",
new DfaultFileRenamePolicy());
. 이객체가 생성되면서 폼에서 지정한 파일이 서버상의 폴더에 저장됩니다.
- getParameterNames()
폼에서 전송한 파라미터들의 이름을 Enumeration타입으로 반환, input 태그중에서 file 속성이 아닌
모든 파라미터들의 이름을 반환 합니다.
- getParameter()
파라미터의 이름을 인자로 받아서 그 파라미터의 값을 반환 합니다.
- getFileNames()
폼요소 중 file 속성으로 지정된 input태그의 이름을 Enumeration타입으로 반환 합니다.
<input type="file" name="uploadfile"> 태그가 폼요소에 있다며 uploadfile이란 파라메터의 이름이
담긴 Enumeration을 반환 합니다.
- getFilesystemName()
서버상에 실제로 업로드된 파일 이름을 String 타입으로 반환 합니다.
파일명이 중복될 경우 파일명뒤에 filename1.xxx filename2.xxx 식으로 변경된 이름 반환 합니다.
- getOriginalFileName()
사용자가 직접 지정한 파일명을 반환, 파일명이 변경되기 전의 파일명이 반환 됩니다.
- getContentType()
getContentType() 메소드는 업로드된 파일의 컨텐트 타입을 반환 합니다.
- getFile()
서버상에 업로드된 파일에 대한 파일 객체를 반환 합니다.
3. 폼데이터 분석 & 파일 업로드 페이지 구현
<%--
/**
* Upload file...
* jsp file name : FileUploadPage.jsp
**/
--%>
<%@page contentType="text/html;charset=euc-kr" %>
<%@page import="com.oreilly.servlet.MultipartRequest,
com.oreilly.servlet.multipart.DefaultFileRenamePolicy,
java.util.*,
java.io.*"
%>
<%
String realFolder = "";
String saveFolder = "filestorage";
String encType = "euc-kr";
int maxSize = 5*1024*1024;
ServletContext context = getServletContext();
realFolder = context.getRealPath(saveFolder);
//out.println("the realpath is : " + realFolder+"<br>");
try
{
MultipartRequest multi = null;
multi = new MultipartRequest( request,realFolder,maxSize,encType,new DefaultFileRenamePolicy());
Enumeration params = multi.getParameterNames();
while(params.hasMoreElements()){
String name = (String)params.nextElement();
String value = multi.getParameter(name);
out.println(name + " = " + value +"<br>");
}
Enumeration files = multi.getFileNames();
while(files.hasMoreElements()){
String name = (String)files.nextElement();
String filename = multi.getFilesystemName(name);
String original = multi.getOriginalFileName(name);
String type = multi.getContentType(name);
File f = multi.getFile(name);
out.println("파라메터 이름 : " + name +"<br>");
out.println("실제 파일 이름 : " + original +"<br>");
out.println("저장된 파일 이름 : " + filename +"<br>");
out.println("파일 타입 : " + type +"<br>");
if(f!=null){
out.println("크기 : " + f.length());
out.println("<br>");
}
}
}catch(IOException ioe){
System.out.println(ioe);
}catch(Exception ex){
System.out.println(ex);
}
%>
4. 여러개의 파일 업로드
FileSelectPage.jsp
<%@page contentType="text/html; charset=euc-kr" %>
<%!
public String getParam(HttpServletRequest request, String paramName){
if(request.getParameter(paramName)!=null){
return request.getParameter(paramName);
}else{
return "";
}
}
%>
<%
request.setCharacterEncoding("euc-kr");
int filecounter = 0;
if(request.getParameter("addcnt")!=null){
filecounter = Integer.parseInt(request.getParameter("addcnt"));
}
%>
<html>
<head>
<title>File Select Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function inputValue(form1, param, form2, idx){
var paramValue = form1.elements[idx].value;
form2.elements[idx].value = paramValue;
return;
}
function addFile(formName){
if(formName.addcnt.value==""){
alert(" 입력할 파일 갯수를 입력하고 확인버튼을 눌러주세요" );
formName.addcnt.focus();
return;
}
formName.submit();
}
function elementCheck(formName){
paramIndex = 1;
for(idx=0; idx<formName.elements.length; idx++){
if(formName.elements[idx].type == "file"){
if(formName.elements[idx].value==""){
var message = paramIndex+" 번째 파일정보가 누락되었습니다.\n업로드할 파일을 선택해 주세요";
alert(message);
formName.elements[idx].focus();
return;
}
paramIndex++;
}
}
formName.action = "FileInfoView.jsp";
formName.submit();
}
</script>
</head>
<body topmargin="100">
<div align="center"><font color="#0000ff" size="2">
복수개의 파일의 업로드를 위하여 파일 갯수를 입력한 후<br>
확인 버튼을 눌러주세요!!!<br>
입력이 완료되면 DONE 버튼을 눌러주세요</font></div><br>
<form name="frmName1" method="post">
<table width="75%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#660000" bgcolor="#FFFF99">
<tr bgcolor="#FFCC00">
<td width="10%"><div align="right">user</div></td>
<td><input type="text" name="user" onkeyup="inputValue(this.form,user,frmName2,0)" value="<%=getParam(request, "user")%>"></td>
<td width="10%"><div align="right">title</div></td>
<td><input type="text" name="title" onkeyup="inputValue(this.form,title,frmName2,1)" value="<%=getParam(request, "title")%>"></td>
</tr>
<tr bgcolor="#FFCC00">
<td width="15%"><div align="right">Abstract</div></td>
<td width="50%" colspan="3">
<textarea name="abstract" cols="40" onkeyup="inputValue(this.form,abstract, frmName2,2)"><%=getParam(request,"abstract")%></textarea>
</td>
</tr>
<tr>
<td colspan="4"><div align="center">
<font size="-2">추가할 파일 수 입력</font>
<input type="Text" name="addcnt">
<input type="button" value=" 확인 " onclick="addFile(this.form)">
</div>
</td>
</tr>
</table>
</form>
<form name="frmName2" method="post" enctype="multipart/form-data">
<table width="75%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#660000" bgcolor="#FFFF99">
<tr bgcolor="#FFCC00">
<td width="40%">
<input type="hidden" name="txtUser" value="<%=getParam(request, "user")%>">
<input type="hidden" name="txtTitle" value="<%=getParam(request, "title")%>">
<input type="hidden" name="txtAbstract" value="<%=getParam(request,"abstract")%>">
<% for(int i=0; i<filecounter; i++){%>
<input type="File" size="50" name="selectFile<%=i%>"><br>
<% }%>
</td>
<td><input type="Button" value="DONE" onclick="elementCheck(this.form)"></td>
</tr>
</table>
</form>
</body>
</html>
<<<< FileInfoView.jsp
<%@page contentType="text/html;charset=euc-kr" %>
<%@page import="com.oreilly.servlet.MultipartRequest,
com.oreilly.servlet.multipart.DefaultFileRenamePolicy,
java.util.*,
java.io.*"
%>
<%
String realFolder = "";
String saveFolder = "filestorage";
String encType = "euc-kr";
int maxSize = 10*1024*1024;//10M
ServletContext context = getServletContext();
realFolder = context.getRealPath(saveFolder);
ArrayList saveFiles = new ArrayList();
ArrayList origFiles = new ArrayList();
String paramUser = "";
String paramTitle= "";
String paramAbstract = "";
try
{
MultipartRequest multi = new MultipartRequest( request,realFolder,maxSize,encType,new DefaultFileRenamePolicy());
paramUser = multi.getParameter("txtUser");
paramTitle = multi.getParameter("txtTitle");
paramAbstract = multi.getParameter("txtAbstract");
Enumeration files = multi.getFileNames();
while(files.hasMoreElements()){
String name = (String)files.nextElement();
saveFiles.add(multi.getFilesystemName(name));
origFiles.add(multi.getOriginalFileName(name));
}
%>
<html>
<head>
<title>File Info Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="75%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#660000" bgcolor="#FFFF99">
<tr>
<td width="10%" bgcolor="#FFCC00"><div align="right"><strong>user</strong></div></td>
<td width="30%"><%= paramUser %></td>
<td width="10%" bgcolor="#FFCC00"><div align="right"><strong>title</strong></div></td>
<td width="30%"><%= paramTitle %></td>
</tr>
<tr>
<td width="10%" bgcolor="#FFCC00"><div align="right"><strong>Abstract</strong></div></td>
<td width="50%" colspan="3">
<textarea cols="50" rows="5" disabled><%= paramAbstract %></textarea>
</td>
</tr>
<tr><td colspan="4" bgcolor="#ffffff"> </td></tr>
<tr>
<td colspan="4"><strong>업로드된 파일들입니다.</strong></td>
</tr>
<%for(int i=0; i<saveFiles.size();i++){%>
<tr bgcolor="#FFCC00">
<td colspan="4">
<a href="../<%=saveFolder+"/"+saveFiles.get(i)%>"><strong><%=origFiles.get(i)%></strong></a>
</td>
</tr>
<%}%>
</table>
</body>
</html>
<%
}catch(IOException ioe){
System.out.println(ioe);
}catch(Exception ex){
System.out.println(ex);
}
%>
