[Java] Spring 환경 - 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)

Development note/Java

[Java] Spring 환경 - 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)

v명월v 2019. 10. 28. 09:00

안녕하세요. 명월입니다.

이 글은 [Java] Spring 환경 - 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)에 대한 글입니다.

제가 이것과 비슷한 주제로 PHP와 Java Servlet에서 구현하는 글을 쓴 적이 있습니다.

링크 - [PHP] ajaxForm을 이용한 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)

링크 - [Java] Servlet 환경 - 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)

Java는 파일 업로드 영역이 좀 복잡한 경향이 있어서 잘 정리 두지 않으면 항상 사용할 때마다 잊어버리거나 헤매는 경우가 많습니다.

이번에는 Spring환경에서 파일 업로드하는 방법입니다.

링크 - [Java강좌 - 41] eclipse에서 spring web framework를 이용해서 웹 서비스 프로젝트를 만드는 방법

먼저 파일 업로드를 구현하기 위해서 maven에서 두가지 라이브러리를 연결해야 합니다.

<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.3.2</version>
</dependency>
<dependency>
  <groupId>commons-io</groupId>
  <artifactId>commons-io</artifactId>
  <version>2.5</version>
</dependency>

그리고 mvc-config.xml에서 업로드시 파일 제한 사이즈 설정해야 합니다.

<bean id="multipartResolver"
  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <!-- max upload size in bytes -->
  <property name="maxUploadSize" value="2097152000" /> <!-- 200MB -->
  <!-- max size of file in memory (in bytes) -->
  <property name="maxInMemorySize" value="1048576" /> <!-- 1MB -->
</bean>

그리고 우선 파일 업로드를 할 웹 페이지를 생성합니다. 이 부분은 php과 servlet에서 사용했던 것 그대로 사용하는 것입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <title>title</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
  <form enctype="multipart/form-data">
    <input type="file" name="data">
    <input type="submit">
  </form>
  <br />
  <br />
  <div class="progress-label"></div>
  <div id="progressbar"></div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      var progressbar = $("#progressbar");
      var progressLabel = $(".progress-label");
      progressbar.progressbar({
        value: true,
        change: function() {
          progressLabel.text("Current Progress: " + progressbar.progressbar("value") + "%");
        },
        complete: function() {
          progressLabel.text("Complete!");
          $(".ui-dialog button").last().trigger("focus");
        }
      });
      $('form').ajaxForm({
        // 결로는 upload.html이다.
        url: "upload.html",
        type: "POST",
        beforeSubmit: function(arr, $form, options) { 
          progressbar.progressbar( "value", 0 );
        },
        uploadProgress: function(event, position, total, percentComplete) {
          progressbar.progressbar( "value", percentComplete );
        },
        success: function(text, status, xhr, element) {
          progressbar.progressbar( "value", 100 );
        }
      });
    });
  </script>
</body>
</html>

그리고 파일을 받기 위한 Controller를 작성합니다.

package controller;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.io.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

@Controller
public class MainController {
  @RequestMapping(value = "/index.html")
  public String index(ModelMap modelmap, HttpSession session, HttpServletRequest req, HttpServletResponse res) {
    return "index";
  }
  @RequestMapping(value = "/upload.html", method = RequestMethod.POST)
  public void upload(@RequestParam("data") MultipartFile multipartFile, HttpSession session, HttpServletRequest req, HttpServletResponse res) {
    // 다운로드할 경로는 d:\work 폴더입니다.
    File targetFile = new File("d:\\work\\" + multipartFile.getOriginalFilename());
    try {
      InputStream fileStream = multipartFile.getInputStream();
      FileUtils.copyInputStreamToFile(fileStream, targetFile);
    } catch (IOException e) {
      FileUtils.deleteQuietly(targetFile);
      e.printStackTrace();
    }
  }
}

여기까지 작성이 되었으면 upload할 준비는 완료되었습니다.

그럼 기동을 해보겠습니다.