Spring STEP 8 - 파일 업로드

★ 새 프로젝트 만들기

- New > Spring Legacy Project > Spring MVC Project > "FileTest" > "com.test.file" > Finish

 

■ 파일 업로드

1. cos.jar > 개발 종료
2. commons-fileupload > 많이 사용 
3. Servlet 3.0 이상 > 파일 업로드 기능 내장

 

■ 기초 셋팅 

• https://github.com/pinnpublic/class/wiki/%EC%8A%A4%ED%94%84%EB%A7%81-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%9D%BC%EA%B4%84-%EC%A0%81%EC%9A%A9

스프링 프로젝트 일괄 적용

• form.xml 소스코드

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.test</groupId>
	<artifactId>file</artifactId>
	<name>FileTest</name>
	<packaging>war</packaging>
	<version>1.0.0-BUILD-SNAPSHOT</version>
	<properties>
		<java-version>11</java-version>
		<org.springframework-version>5.0.7.RELEASE</org.springframework-version>
		<org.aspectj-version>1.6.10</org.aspectj-version>
		<org.slf4j-version>1.6.6</org.slf4j-version>
	</properties>
	<dependencies>
		<!-- Spring -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${org.springframework-version}</version>
			<exclusions>
				<!-- Exclude Commons Logging in favor of SLF4j -->
				<exclusion>
					<groupId>commons-logging</groupId>
					<artifactId>commons-logging</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- AspectJ -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>

		<!-- Logging -->
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${org.slf4j-version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>jcl-over-slf4j</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>${org.slf4j-version}</version>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.17</version>
		</dependency>

		<!-- @Inject -->
		<dependency>
			<groupId>javax.inject</groupId>
			<artifactId>javax.inject</artifactId>
			<version>1</version>
		</dependency>

		<!-- Servlet / JSP -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.3</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<!-- Test -->
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency>

		<!-- Lombok -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.28</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- AOP -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjrt</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>

		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjweaver</artifactId>
			<version>${org.aspectj-version}</version>
		</dependency>

		<!-- JSON -->
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.15.0</version>
		</dependency>

		<dependency>
			<groupId>com.fasterxml.jackson.dataformat</groupId>
			<artifactId>jackson-dataformat-xml</artifactId>
			<version>2.15.0</version>
		</dependency>

		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.10.1</version>
		</dependency>

		<!-- HikariCP -->
		<dependency>
			<groupId>com.zaxxer</groupId>
			<artifactId>HikariCP</artifactId>
			<version>2.7.4</version>
		</dependency>

		<!-- MyBatis -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>3.5.2</version>
		</dependency>

		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.3.2</version>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-jdbc</artifactId>
			<version>${org.springframework-version}</version>
		</dependency>

		<!-- log4jdbc.log4j2 -->
		<dependency>
			<groupId>org.bgee.log4jdbc-log4j2</groupId>
			<artifactId>log4jdbc-log4j2-jdbc4</artifactId>
			<version>1.16</version>
		</dependency>

	</dependencies>
	<build>
		<plugins>
			<plugin>
				<artifactId>maven-eclipse-plugin</artifactId>
				<version>2.9</version>
				<configuration>
					<additionalProjectnatures>
						<projectnature>org.springframework.ide.eclipse.core.springnature</projectnature>
					</additionalProjectnatures>
					<additionalBuildcommands>
						<buildcommand>org.springframework.ide.eclipse.core.springbuilder</buildcommand>
					</additionalBuildcommands>
					<downloadSources>true</downloadSources>
					<downloadJavadocs>true</downloadJavadocs>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>2.5.1</version>
				<configuration>
					<source>11</source>
					<target>11</target>
					<compilerArgument>-Xlint:all</compilerArgument>
					<showWarnings>true</showWarnings>
					<showDeprecation>true</showDeprecation>
				</configuration>
			</plugin>
			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>exec-maven-plugin</artifactId>
				<version>1.2.1</version>
				<configuration>
					<mainClass>org.test.int1.Main</mainClass>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

• web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">

	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>

	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

	<!-- Processes application requests -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

	<filter>
		<filter-name>encodingFilter</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encodingFilter</filter-name>
		<url-pattern>*</url-pattern>
	</filter-mapping>

</web-app>

• rootcontext.xml 

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

	<!-- Root Context: defines shared resources visible to all other web components -->
	<bean id="hikariConfig" class="com.zaxxer.hikari.HikariConfig">
		<property name="driverClassName"
			value="net.sf.log4jdbc.sql.jdbcapi.DriverSpy"></property>
		<property name="jdbcUrl"
			value="jdbc:log4jdbc:oracle:thin:@localhost:1521:xe"></property>
		<property name="username" value="hr"></property>
		<property name="password" value="java1234"></property>
	</bean>

	<bean id="dataSource" class="com.zaxxer.hikari.HikariDataSource"
		destroy-method="close">
		<constructor-arg ref="hikariConfig"></constructor-arg>
	</bean>

	<bean id="sessionfactory"
		class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="mapperLocations"
			value="classpath*:mapper/*.xml"></property>
	</bean>

	<bean class="org.mybatis.spring.SqlSessionTemplate">
		<constructor-arg ref="sessionfactory"></constructor-arg>
	</bean>

</beans>

• XML Mapper 추가

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="작성">

</mapper>

• log4jdbc.log4j2.properties 추가

log4jdbc.spylogdelegator.name=net.sf.log4jdbc.log.slf4j.Slf4jSpyLogDelegator

• log4 추가

<logger name="jdbc.audit">
	<level value="warn" />
</logger>

<logger name="jdbc.resultset">
	<level value="warn" />
</logger>

<logger name="jdbc.connection">
	<level value="warn" />
</logger>

<logger name="jdbc.sqltiming">
	<level value="off" />
</logger>

 

■ web.xml 수정 -> 파일 업로드 설정 추가

• 파일 업로드 설정

<!-- 파일 업로드 설정 -->
<multipart-config>

    <!-- 임시 폴더 지정(C:\\class\\code\\spring\\temp) -->
    <location>C:\\class\\code\\spring\\temp</location>

    <!-- 파일 최대 크기 10MB -->
    <max-file-size>10485760</max-file-size>

    <!-- 한번에 업로드할 수 있는 파일들의 총 크기 50MB -->
    <max-request-size>52428800</max-request-size>

    <!-- 업로드에 사용할 메모리 용량 10MB -->
    <file-size-threshold>10485760</file-size-threshold>

</multipart-config>

 

■ servlet-context.xml

• 코드 분석

<!-- @Controller 사용할 수 있게 한다. -->
<annotation-driven />

<!-- webapp > resources 폴더의 경로의 단축 표현 -->
<resources mapping="/resources/**" location="/resources/" />

<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <beans:property name="prefix" value="/WEB-INF/views/" />
    <beans:property name="suffix" value=".jsp" />
</beans:bean>

<context:component-scan base-package="com.test.file" />

• bean 추가 

<!-- 파일 업로드 -->
<beans:bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver">

</beans:bean>

 

★ 단일 파일 업로드(DB 사용 없이)

• 파일 구조

- "com.test.controller" > FileController.java
- views > add.jsp
        > addok.jsp

• 스캔 추가 -> servlet-context.xml

<context:component-scan base-package="com.test.controller" />

• FileController.java

@Controller
public class FileController {

	@GetMapping("/add.do")
	public String add() {
		
		return "add";
	}
	
	@PostMapping("/addok.do")
	public String addok(Model model, String txt, MultipartFile attach, HttpServletRequest req) {
		
		//System.out.println("txt: " + txt);
		
		System.out.println(attach.getName()); //<input type="file" name>
		System.out.println(attach.getOriginalFilename()); //업로드 파일
		System.out.println(attach.getContentType()); //파일 MiME
		System.out.println(attach.getSize());	// 사이즈
		System.out.println(attach.isEmpty());	// 존재 유무
		
		String path = req.getRealPath("/resources/files");
		System.out.println(path);
		
		try {
			
			//파일명 중복 방지
			//1. 숫자 붙이기
			//2. 고유 파일명 만들기
			// - 시간_파일명
			// - 난수_파일명
			// -> System.nanoTime() : 73432668255580_파일명
			//3. UUID - Universally Unique > 네트워크 상에서 고유성이 보장되는 ID를 만들기 위한 표준
			// - 시간 + 난수 조합
			// -> 659eb665-fc23-4211-a18a-5953a6ae01b6_파일명
			
//			System.out.println(System.nanoTime() + "_" + attach.getOriginalFilename());
			
			UUID uuid = UUID.randomUUID();
			System.out.println(uuid);
			
			
			File file = new File(path + "\\" + uuid + "_" +  attach.getOriginalFilename());
			attach.transferTo(file);
			
			
			model.addAttribute("txt", txt);
			model.addAttribute("filename", uuid + "_" + attach.getOriginalFilename());
			model.addAttribute("orgfilename", attach.getOriginalFilename());
			
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
		
		return "addok";
	}
	
	//다운로드가 되도록 Servlet 처리
	
	@GetMapping(value = "/download.do", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
    @ResponseBody
    public ResponseEntity<Resource> downloadFile(@RequestHeader("User-Agent") String userAgent, String filename, HttpServletRequest req) {

      String path = req.getRealPath("/resources/files");
      Resource resource = new FileSystemResource(path + "\\" + filename);

      if (resource.exists() == false) {
         return new ResponseEntity<>(HttpStatus.NOT_FOUND);
      }

      String resourceName = resource.getFilename();

      // remove UUID
      String resourceOriginalName = resourceName.substring(resourceName.indexOf("_") + 1);

      HttpHeaders headers = new HttpHeaders();
      try {

         String downloadName = null;

         if (userAgent.contains("Trident")) {
            downloadName = URLEncoder.encode(resourceOriginalName, "UTF-8").replaceAll("\\+", " ");
         } else if (userAgent.contains("Edge")) {
            downloadName = URLEncoder.encode(resourceOriginalName, "UTF-8");
         } else {
            downloadName = new String(resourceOriginalName.getBytes("UTF-8"), "ISO-8859-1");
         }


         headers.add("Content-Disposition", "attachment; filename=" + downloadName);

      } catch (UnsupportedEncodingException e) {
         e.printStackTrace();
      }

      return new ResponseEntity<Resource>(resource, headers, HttpStatus.OK);
   }
	
}

• add.jsp

<body>
	<!-- 파일 업로드 -->
	
	<h1>파일 업로드</h1>
	
	<form method="POST" action="/file/addok.do" enctype="multipart/form-data">
	<table class="vertical">
		<tr>
			<th>텍스트</th>
			<td><input type="text" name="txt"></td>
		</tr>
		<tr>
			<th>파일</th>
			<td><input type="file" name="attach"></td>
		</tr>
	</table>
	<div>
		<button>보내기</button>
	</div>
	</form>
	

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

	/* 파일 크기 넘는 파일 -> 막기  */
	
	function checkFile(filename, filesize) {
		
		const maxsize = 10485760; //10MB
		const regex = /(.*?)\.(exe|sh)$/gi;
		
		if(filesize >= maxsize) {
			alert('단일 파일의 크기가 10MB 이하만 가능합니다.');
			return false;
		}
		
		if(regex.test(filename)) {
			alert('해당 파일은 업로드할 수 없습니다.');
			return false;
		}
		
		return true;
		
	}
 
	//전송되기 바로 직전에 발생하는 이벤트
	$('#form1').submit(function() {
		
		let filename = $('input[name=attach]')[0].files[0].name;
		alert(filename);
		
		let filesize = $('input[name=attach]')[0].files[0].size;
		alert(filesize);
		
		if (!checkFile(filename, filesize)) {
			
			//전송 금지!!
			event.preventDefault();
			return false;
		}
		
	});

</script>
</body>

• addok.jsp

<!--  -->
<h1>결과</h1>

<div class="message" title="txt">${txt}</div>
<div class="message" title="txt">
    <a href="/file/resources/files/${filename}" download>${filename}</a>	
</div>

<div class="message" title="txt">
    <a href="/file/download.do?filename=${filename}" download>${orgfilename}</a>	
</div>

 

★ 다중 파일 업로드 ver1 (multiple 옵션 사용)

• add.jsp
• multiple 옵션 : 여러개의 파일을 첨부할 수 있는 옵션

<form method="POST" action="/file/multiaddok.do" enctype="multipart/form-data">
<table class="vertical">
    <tr>
        <th>텍스트</th>
        <td><input type="text" name="txt"></td>
    </tr>
    <tr>
        <th>파일</th>
        <td><input type="file" name="attach" multiple></td><!-- multiple : 여러개의 파일을 첨부할 수 있는 옵션 -->
    </tr>
</table>
<div>
    <button>보내기</button>
</div>
</form>
<script>
$('#form2').submit(function() {

    //let filename = $('input[name=attach]')[1].files[0].name;
    //let filesize = $('input[name=attach]')[1].files[0].size;

    let totalsize = 0;

    Array.from($('input[name=attach]')[1].files).forEach(file => {

        if (!checkFile(file.name, file.size)) {

            //전송 금지!!
            event.preventDefault();
            return false;
        }

        totalsize += file.size;

    });

    if(totalsize >= 52428800) {
        alert('총 파일 크기의 합이 50MB 이하만 가능합니다.');
    }



});
</script>

• FileController.java

@PostMapping("/multiaddok.do")
public String multiaddok(Model model, String txt, MultipartFile[] attach, HttpServletRequest req) {



    for (MultipartFile file : attach) {

        System.out.println(file.getName()); //<input type="file" name>
        System.out.println(file.getOriginalFilename()); //업로드 파일
        System.out.println(file.getContentType()); //파일 MiME
        System.out.println(file.getSize());	// 사이즈
        System.out.println(file.isEmpty());	// 존재 유무
        System.out.println();

        try {

            UUID uuid = UUID.randomUUID();

            String filename = uuid + "_" + file.getOriginalFilename();

            file.transferTo(new File(req.getRealPath("/resources/files") + "\\" + filename));

        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    model.addAttribute("txt", txt);

    return "addok";

}

 

★ 다중 파일 업로드 ver 2(Drag&Drop)

• add.jsp

<h1>다중 파일 업로드2(Drag ver)</h1>

<form method="POST" action="/file/multiaddok.do" enctype="multipart/form-data" id="form3">
<table class="vertical">
    <tr>
        <th>텍스트</th>
        <td><input type="text" name="txt"></td>
    </tr>
    <tr>
        <th>파일</th>
        <td>
            <div id="attach-zone"></div>
            <input type="file" name="attach" id="attach3" style="display:none;">
        </td><!-- multiple : 여러개의 파일을 첨부할 수 있는 옵션 -->
    </tr>
</table>
<div>
    <button>보내기</button>
</div>
</form>
<script>
$('#attach-zone').on('dragenter', function(e) {
						e.preventDefault();
						e.stopPropagation();
					 })
					 .on('dragover', function(e) {
						 e.preventDefault();
						 e.stopPropagation();
						 $(this).css('background-color', 'gold');
					 })
					 .on('dragleave', function(e) {
						 e.preventDefault();
						 e.stopPropagation();
						 $(this).css('background-color', 'var(--back-color)');
					 })
					 .on('drop', function(e) {
						 
						 $(this).empty();
						 
						 e.preventDefault();
						 
						const files = e.originalEvent.dataTransfer.files;
						
						if(files != null & files != undefined) {
							
							let temp = '';
							
							for (let i=0; i<files.length; i++) {
								
								//console.log(files[i].name);
								
								let f = files[i];
								
								let filename = f.name;
								let filesize = f.size / 1024 / 1024; //MB 변환
								
								filesize = filesize < 1 ? filesize.toFixed(2) : filesize.toFixed(1);
								
								temp += `
									<div class="item">
										<span>\${filename}</span>
										<span>\${filesize}MB</span>
									</div>
								`;
								
							}//for
							
							$(this).append(temp);
							
						}//if
						
						$(this).css('background-color', 'var(--back-color)');
						
						$('#attach3').prop('files', files);
						 
 });
</script>

• FileController.java

@PostMapping("/multiaddok.do")
public String multiaddok(Model model, String txt, MultipartFile[] attach, HttpServletRequest req) {



    for (MultipartFile file : attach) {

        System.out.println(file.getName()); //<input type="file" name>
        System.out.println(file.getOriginalFilename()); //업로드 파일
        System.out.println(file.getContentType()); //파일 MiME
        System.out.println(file.getSize());	// 사이즈
        System.out.println(file.isEmpty());	// 존재 유무
        System.out.println();

        try {

            UUID uuid = UUID.randomUUID();

            String filename = uuid + "_" + file.getOriginalFilename();

            file.transferTo(new File(req.getRealPath("/resources/files") + "\\" + filename));

        } catch (Exception e) {
            e.printStackTrace();
        }

    }

    model.addAttribute("txt", txt);

    return "addok";

}