[Spring] MultipartHttpServletRequset을 이용한 다중 파일 업로드

------------------------------------------------------------------------

시작하기 전에

현재 클라우드 비슷한 웹 프로그램을 개발하고 있습니다.

현재 프로젝트가 파일 업로드 구현이 필수적인데 단일 파일 업로드는 예제가 많습니다.

제가 만드는 클라우드는 특성상 고용량, 많은 파일 업로드 기능이 필요하여 다중 파일 업로드 방식을 찾아 헤멨습니다.

예제를 보면 종류도 많고 사용법도 제각각이라 이것 저것 다 써봤는데 꼭 하나가 되면 하나가 불편한 현실이 다가오더군요

1. 파일업로드 기능은 되는데 다중선택이 안됨.

2. 다중 선택은 되는데 input file 태그를 추가시켜 수동으로 하나하나 파일 선택해야함.

~~3. 단일 파일업로드 + Progress Bar(4번과 비슷함)~~

4. 단일 파일업로드 + Progress Bar(ajax)

5. 다중 파일 업로드 + Progress Bar

6. 다중 파일 업로드+ Progress Bar(ajax)

제가 해본것들인데 종류도 많네요

제가 원했던 파일업로드는 선택window에서 여러 파일 선택시 자동으로 여러 파일이 업로드 되며 진행상황을

%로 확인하는 Progress Bar 까지 보여주는 것이 제 목표입니다.

저 6가지 중에 중복이 될 수도있습니다. 별거 아니네 라고 생각하실지 모르지만 해보세요

조금씩 다릅니다. 저는 제 목표였던 6번 기능을 포스팅 하겠습니다.

5번기능으로 구현했었는데 파일업로드 중에 비동기 쓰레드 생성이 많아질 수록 파일 업로드를 무시하는 현상들이 발견되어 6번으로 변경합니다.

저는 파일업로드만 하는게 아니라 업로드와 동시에 추가적인 변환이라는 작업 때문에 이런 현상이 발생한건지 자세히는 모르나 모든 파일업로드가 끝났을때 변환 작업을 수행하려 합니다.

제가변환이라고 말하는것은 무시하셔도됩니다. 파일업로드만 신경 씁시다.

------------------------------------------------------------------------

progress2.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>BORAJI.COM</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<div class="container">
    <h2>Spring MVC - File Upload Example With Progress Bar</h2>
    <hr>
    
    <form action="fileUpload" method="post" enctype="multipart/form-data">
      <div class="form-group">
        <label>Select File</label> 
        <input class="form-control" type="file" name="files" multiple>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">Upload</button>
      </div>
    </form>
    <br />

<div class="progress">
      <div id="progressBar" class="progress-bar progress-bar-success" role="progressbar"
        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>
    </div>

<div id="alertMsg" style="color: red;font-size: 18px;"></div>
  </div>

여기서 중요한 것은 78번째 줄 input type file 부분에 multiple을 선언해 주면 다중선택이 가능해집니다.

enctype="multipart/form-data" 파일업로드 필수적입니다. 꼭 넣어주세요.

Controller.java (MVC의 컨트롤러부분)

이 소스가 에러가 나오는것은 당연한 것입니다. 파일업로드 기능만 있지 View 구현은 없습니다.

View는 void형 을 ModelAndView나 바꿔서 값을 리턴해주시길 바랍니다.

pom.xml (Maven dependency 추가)

<dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.0.1</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency>

MultipartHttpServletRequset + 다중파일업로드에 필요함

Bean 설정

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns:context="http://www.springframework.org/schema/context"
	xmlns:p="http://www.springframework.org/schema/p" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://www.springframework.org/schema/beans" xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:cache="http://www.springframework.org/schema/cache" xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
                        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
                        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
                        http://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache.xsd">

<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize" value="1000000000" />
		<property name="maxInMemorySize" value="1000000000" />
	</bean>

</beans>

14번 value 값으로 한번에 업로드 가능한 용량을 제한 할 수 있습니다.

결 과

Controller를 Void로 선언했기때문에 밑 에러는 당연한 것입니다. 특정 View는 알아서 설정해주세요.

참조 : https://www.boraji.com/spring-4-mvc-jquery-ajax-file-upload-example-with-progress-bar

http://csetutorials.com/upload-multiple-files-server-using-ajax-spring-mvc.html

'Spring' 카테고리의 다른 글

[Spring Framework] 1. Spring Framework 구조 (0)	2021.05.18
[Spring MVC] Java 네이버 로그인 연동 완벽정리(네아로) (7)	2018.04.18
[Spring] Ajax란 무엇인가, 사용법 (1)	2018.04.09
[Spring] 스프링 외부 URL 리다이렉트(Redirect to external URL) (0)	2017.09.07
[Spring] MVC 패턴 이해 (0)	2017.07.19

유혁의 개발 스토리

[Spring] MultipartHttpServletRequset을 이용한 다중 파일 업로드

'Spring' 카테고리의 다른 글

티스토리툴바

[Spring] MultipartHttpServletRequset을 이용한 다중 파일 업로드

'Spring' 카테고리의 다른 글

관련글

티스토리툴바