🏫 Open API_JAVA
[74일차] Ajax / 파일 업로드 처리기능 구현 / bean 설정 및 라이브러리 추가
Dorothy_YANG
2022. 11. 9. 20:49
728x90
20221108(화)
- 목차
- Ajax
- 파일 업로드 처리기능 구현
- bean 설정 및 라이브러리 추가
< Ajax >
- Asynchronous JavaScript and XML의 약자
- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나
- 장점
1) 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음
2) 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음
이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.
- JSON / XML / HTML / 텍스트 파일 등 - 출처 : http://www.tcpschool.com/ajax/ajax_intro_basic
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
< 파일 업로드 처리기능 구현 >
- SampleController4 작성 후 exUpload.jsp 파일이 들어갈 upload 폴더 만들어야 함!!!
- SampleController4.java 코드
package com.demo.controller;
import java.util.ArrayList;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import lombok.extern.log4j.Log4j;
// 파일 업로드 예제.
@Controller
@Log4j
@RequestMapping("/upload/*")
public class SampleController4 {
// 파일업로드 폼
@GetMapping("/exUpload")
public void exUpload() { // /upload/exUpload
log.info("exUpload called...");
}
// 파일업로드 처리
@PostMapping("/exUploadPost")
public void exUploadPost(ArrayList<MultipartFile> files) {
for(int i=0; i<files.size(); i++) {
log.info("-------------");
log.info("name" + files.get(i).getOriginalFilename()); //클라이언트에서 보내온 파일이름
log.info("size" + files.get(i).getSize()); // 파일크기(기본 단위 byte)
}
}
}
- exUpload.jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 파일업로드시 form태그 사용 -->
<!--
- method="post" 방식사용
- enctype="application/x-www-form-urlencoded" 기본값을 사용하면 안된다.
enctype="multipart/form-data" 방식 사용
-->
<h3>파일 업로드</h3>
<form method="post" action="exUploadPost" enctype="multipart/form-data">
<input type="file" name="files" multiple="multiple"><br>
<input type="submit" value="파일업로드">
</form>
</body>
</html>
- 실행결과
< bean 설정 및 라이브러리 추가 >
- servlet-context.xml에 내용 추가
<!-- 파일업로드를 위한 bean설정작업. bean이름 multipartResolver로 사용해야 한다. -->
<beans:bean id = "multipartResolver" class = "org.springframework.web.multipart.commons.CommonsMultipartResolver">
<beans:property name = "defaultEncoding" value = "utf-8"/>
<!-- 전송되는 파일들의 전체크기 설정. 1024 * 1024 * 10 = 10mb -->
<beans:property name = "maxUploadSize" value = "10485760"/>
<!-- 개별 하나의 파일크기 설정. 1024 * 1024 * 2 = 2mb -->
<beans:property name = "maxUploadSizePerFile" value = "2097152"/>
<!-- 서버에 업로드시 사용될 임시폴더 경로설정-->
<beans:property name = "uploadTempDir" value = "C:/dorothydatabase/upload/tmp"/>
<!-- 서버에 업로드시 사용될 서버측 사용메모리 설정. -->
<beans:property name = "maxInMemorySize" value = "10485756"/>
</beans:bean>
- pom.xml에 내용 추가하기
<!-- 파일업로드 기능지원 라이브러리 -->
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
728x90