본문 바로가기

web/JSP

jsp 다중 파일업로드

어제소스를 바탕으로 새롭게 만들어 보았다.(별다른 변화 없이 업로드 된다는게 cos 컴포넌트가 되게 신기하다;)

1. 행추가를 하면 file박스가 나옵니다. 찾아보기를 눌러서 파일을 추가 하고 전송 버튼을 눌러줍니다.

2. 전송된 파일의 이름과 파일 용량이 표시됩니다.





먼저 index.jsp
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    
    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<script language="javascript">
 var count = 1;
 var addCount;
 
//행추가
function addInputBox() {
 for(var i=1; i<=count; i++) {
  if(!document.getElementsByName("test"+i)[0]) {
   addCount = i;
   break;
  }
  else addCount = count;
 }

 var addStr = "<tr><td width=40><input type=checkbox name=checkList value="+addCount+" size=40 ></td><td width=140><input type=file name=test"+addCount+" size=40></td></tr>";
 var table = document.getElementById("dynamic_table");
 var newRow = table.insertRow();
 var newCell = newRow.insertCell();
 newCell.innerHTML = addStr;
 count++;
}
 
//행삭제
function subtractInputBox() {
 var table = document.getElementById("dynamic_table");
 //var max = document.gForm.checkList.length;
 //alert(max);
 var rows = dynamic_table.rows.length;
 var chk = 0;
 if(rows > 1){
  for (var i=0; i<document.gForm.checkList.length; i++) {
   if (document.gForm.checkList[i].checked == true) {
    table.deleteRow(i);
    i--;
    count--;
    chk++;
   }
  }
  if(chk <= 0){
   alert("삭제할 행을 체크해 주세요.");
  }
   }else{
    alert("더이상 삭제할 수 없습니다.");
   }
}
 
function submitbutton() {
 var gform = document.gForm;
 gform.count.value = eval(count);
 //alert(count);
 gForm.submit();
 return;
}
</script>

<BODY -nLoad="addInputBox()">
<input type="button" value="행 추가" onclick="javascript:addInputBox();"> : <input type="button" value="행 삭제" onclick="javascript:subtractInputBox();"><br><br>
<input type="button" value="전송" onclick="javascript:submitbutton();">
<form name="gForm" action="upload.do" enctype="multipart/form-data" method="post" >
  <input type="hidden" name="count" >
   
<table  cellpadding=0 cellspacing=0 id="" border="1">
<tr>
 <td width="40">체크</td>
 <td width="160">내용</td>
</tr>
<tr>
<table cellpadding=0 cellspacing=0 id="dynamic_table" border="1">
</table>
</tr>
</table>
</form>

</BODY>
</HTML>

어제꺼와 바뀐것이 있따면 text 박스가 file로 바꼈다는거박에 없다.

다음엔 서블릿 파일 upload.java (web.xml 파일에서 서블릿 네임을 추가해줘야 합니다. - 

jsp cos.jar 기초 파일 업로드 요기를 참조하세요)




다음엔 서블릿 파일인 upload.java 파일입니다.
package upload;

import java.io.File;
import java.io.IOException;
import java.util.Enumeration;

import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class upload  extends HttpServlet{

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {

             
      
        doPost(request, response);
   
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {
        
        
        RequestDispatcher rd = null;
        String fileName = "";
        String fileLength = "";
        File file = null;
        String savePath = "C:/HarimPMS/workspace/my/saveFile";
        
       String count = "";
        int maxSize = 5 * 1024 * 1024; // 최대 업로드 파일 크기 5MB(메가)로 제한
                 
                 try {
                     MultipartRequest multi = new MultipartRequest(request,
                       savePath, maxSize, "euc-kr", new DefaultFileRenamePolicy());
                     
                     count = multi.getParameter("count");
                                        
                     Enumeration efiles = multi.getFileNames();
                     int i = 0;
                     while(efiles.hasMoreElements()){
                         String name = (String)efiles.nextElement(); 
                         file = multi.getFile(name);                       
                       String str = file.getName();
                       i++;
                       fileName += "&fileName"+i+"="+str;
                       fileLength += "&fileLength"+i+"="+file.length();
                        
                    }
                    
                     }catch (Exception e) {
                        System.out.print("예외 발생 : " + e);
                    }
                         
         rd = getServletContext().getRequestDispatcher("/uploadfileview.jsp?count="+count+fileName+fileLength);
        rd.forward(request, response);
    }
}

보실것은 파라미터를 request로 받는것이 아닌 multi 객체로 받는것을 볼수 잇습니다.(빨간색부분)
multi 로 객체를 넘겨주는 순간 request객체는 소멸되는듯합니다.(아무리해도 안되더라고요;;) 
이부분에서 한참을 해맷다는..

별다른건 없고 while문에서 저장한 객체들의 Enumeration 객체로 받아서 File 객체로 생성한 다음 파일명과 용량을 스트링으로 붙여서 파라미터로 넘겨주는거 밖에 없습니다.


마지막으로 결과 화면인 uploadfileview.jsp 입니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
    <% request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%

int count = Integer.parseInt(request.getParameter("count"));

%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<%
for(int i = 1; i<=count; i++){
    String filename = "fileName"+i;
    String filelength = "fileLength"+i;
    if(request.getParameter(filename) != null){%>    
    파일이름 : <%=request.getParameter(filename)%><br>
    파일 용량 : <%=request.getParameter(filelength) %>KB<br><br>
    <%}     
}
%>
</body>
</html>

파라미터 값으로 받아온 count값만큼 for문을 돌면서 파일명과 용량을 표시해 줍니다.

파일업로드상에서 보면은 서블릿에서 이미 끝낫으며 데이터 만을 객체화 하여 뿌려주는 역활만을 하게 만들었습니다. 사실 multi 객체가 만들어지는 순간 파일 업로드는 끝난 상태가 됩니다.





간단한 파일 업로드에서 동적인 테이블추가 그리고 두개를 합친것까지 3일동안이나 잼있는 경험을 했습니다.
(웹은 초보라 마냥 신기하기만 하네요..배울게 너무 많습니다..ㅜㅡㅜ) 

내일은 썸네일 이미지 생성이나 해볼까~ 합니다~ ㅎ