Computer >> 컴퓨터 >  >> 프로그래밍 >> 프로그래밍

JSP로 파일 업로드 구현하기: HTML 폼 작성부터 백엔드 처리까지

JSP는 HTML 폼 태그와 함께 사용하여 사용자가 서버에 파일을 업로드할 수 있도록 지원합니다. 업로드 대상 파일은 텍스트 파일, 바이너리 파일, 이미지 파일 등 어떤 종류의 문서든 가능합니다.

파일 업로드 폼 만들기

먼저 파일 업로드 폼을 작성하는 방법부터 살펴보겠습니다. 다음 HTML 코드는 업로더 폼을 생성하며, 작성 시 아래의 핵심 사항들을 반드시 확인해야 합니다.

  • 폼의 method 속성은 반드시 POST 방식으로 설정해야 하며, GET 방식은 사용할 수 없습니다.
  • 폼의 enctype 속성은 반드시 multipart/form-data로 지정해야 합니다.
  • 폼의 action 속성에는 서버 백엔드에서 파일 업로드를 처리할 JSP 파일을 지정해야 합니다. 아래 예제에서는 UploadFile.jsp 파일을 사용해 파일을 업로드합니다.
  • 단일 파일을 업로드하려면 type="file" 속성을 가진 <input /> 태그 하나를 사용합니다. 여러 개의 파일을 동시에 업로드하고 싶다면 name 속성 값을 서로 다르게 한 input 태그를 여러 개 추가하면 되며, 브라우저는 각 입력란마다 찾아보기(Browse) 버튼을 자동으로 연결해 줍니다.

예제 코드

<html>
   <head>
      <title>File Uploading Form</title>
   </head>
   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      <form action = "UploadServlet" method = "post" enctype = "multipart/form-data">
         <input type = "file" name = "file" size = "50" />
          <br />
         <input type = "submit" value = "Upload File" />
      </form>
   </body>
</html>

위 코드를 실행하면 다음과 같은 화면이 표시됩니다. 로컬 PC에서 파일을 선택한 뒤 "Upload File" 버튼을 클릭하면 선택한 파일이 함께 폼이 제출됩니다.

실행 결과

File Upload
Select a file to upload

참고: 위 폼은 동작 원리를 보여주기 위한 예시일 뿐 실제로 작동하지 않습니다. 직접 코드를 작성해 실행해야 정상적으로 동작하는 것을 확인할 수 있습니다.

백엔드 JSP 스크립트 작성하기

이제 업로드된 파일이 저장될 위치를 정의해야 합니다. 이 경로는 프로그램 내에 하드코딩할 수도 있고, 아래와 같이 web.xml의 context-param 요소를 사용하는 외부 설정으로 관리할 수도 있습니다.

<web-app>
   ....
   <context-param>
      <description>Location to store uploaded file</description>
      <param-name>file-upload</param-name>
      <param-value>
         c:\apache-tomcat-5.5.29\webapps\data\
      </param-value>
   </context-param>
   ....
</web-app>

다음은 UploadFile.jsp의 전체 소스 코드입니다. 이 스크립트는 한 번에 여러 개의 파일 업로드도 처리할 수 있습니다. 본격적으로 파일 업로드를 진행하기 전에 아래 사항들을 먼저 점검하세요.

  • 아래 예제는 FileUpload 라이브러리에 의존하므로, 클래스패스(classpath)에 최신 버전의 commons-fileupload.x.x.jar 파일이 포함되어 있는지 확인해야 합니다. 해당 라이브러리는 https://commons.apache.org/fileupload/ 에서 다운로드할 수 있습니다.
  • FileUpload는 Commons IO에 의존하므로, 최신 버전의 commons-io-x.x.jar 파일도 클래스패스에 포함되어야 합니다. 다운로드 주소는 https://commons.apache.org/io/ 입니다.
  • 예제를 테스트할 때는 maxFileSize보다 작은 크기의 파일을 업로드해야 합니다. 그렇지 않으면 파일이 업로드되지 않습니다.
  • 미리 c:\temp 디렉터리와 c:\apache-tomcat5.5.29\webapps\data 디렉터리를 생성해 두어야 합니다.
<%@ page import = "java.io.*,java.util.*, javax.servlet.*" %>
<%@ page import = "javax.servlet.http.*" %>
<%@ page import = "org.apache.commons.fileupload.*" %>
<%@ page import = "org.apache.commons.fileupload.disk.*" %>
<%@ page import = "org.apache.commons.fileupload.servlet.*" %>
<%@ page import = "org.apache.commons.io.output.*" %>

<%
   File file ;
   int maxFileSize = 5000 * 1024;
   int maxMemSize = 5000 * 1024;
   ServletContext context = pageContext.getServletContext();
   String filePath = context.getInitParameter("file-upload");

   // Verify the content type
   String contentType = request.getContentType();

   if ((contentType.indexOf("multipart/form-data") >= 0)) {
      DiskFileItemFactory factory = new DiskFileItemFactory();
      // maximum size that will be stored in memory
      factory.setSizeThreshold(maxMemSize);

      // Location to save data that is larger than maxMemSize.
      factory.setRepository(new File("c:\\temp"));

      // Create a new file upload handler
      ServletFileUpload upload = new ServletFileUpload(factory);

      // maximum file size to be uploaded.
      upload.setSizeMax( maxFileSize );

      try {
         // Parse the request to get file items.
         List fileItems = upload.parseRequest(request);

         // Process the uploaded file items
         Iterator i = fileItems.iterator();

         out.println("<html>");
         out.println("<head>");
         out.println("<title>JSP File upload</title>");
         out.println("</head>");
         out.println("<body>");

         while ( i.hasNext () ) {
            FileItem fi = (FileItem)i.next();
            if ( !fi.isFormField () ) {
               // Get the uploaded file parameters
               String fieldName = fi.getFieldName();
               String fileName = fi.getName();
               boolean isInMemory = fi.isInMemory();
               long sizeInBytes = fi.getSize();

               // Write the file
               if( fileName.lastIndexOf("\\") >= 0 ) {
                  file = new File( filePath +
                  fileName.substring( fileName.lastIndexOf("\\"))) ;
               } else {
                  file = new File( filePath +
                  fileName.substring(fileName.lastIndexOf("\\")+1)) ;
               }
               fi.write( file ) ;
               out.println("Uploaded Filename: " + filePath +
               fileName + "<br>");
            }
         }
         out.println("</body>");
         out.println("</html>");
      } catch(Exception ex) {
         System.out.println(ex);
      }
   } else {
      out.println("<html>");
      out.println("<head>");
      out.println("<title>Servlet upload</title>");
      out.println("</head>");
      out.println("<body>");
      out.println("<p>No file uploaded</p>");
      out.println("</body>");
      out.println("</html>");
   }
%>

이제 앞서 작성한 HTML 폼을 통해 실제로 파일을 업로드해 보겠습니다. 브라우저에서 https://localhost:8080/UploadFile.htm에 접속하면 다음과 같은 화면이 나타나며, 이를 통해 로컬 컴퓨터의 어떤 파일이든 업로드할 수 있습니다.

File Upload
Select a file to upload

JSP 스크립트가 정상적으로 동작했다면, 업로드한 파일은 c:\apache-tomcat5.5.29\webapps\data\ 디렉터리에 저장되어 있을 것입니다.