[74일차] Ajax / 파일 업로드 처리기능 구현 / bean 설정 및 라이브러리 추가

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

저작자표시 (새창열림)

'🏫 Open API_JAVA' 카테고리의 다른 글

[76일차] 게시판 기능구현 순서 / 의존성 주입 / 게시물 삭제 기능 구현 / 오라클 인덱스 힌트 (0)	2022.11.13
[75일차] 게시판 구조 생성 / 디자인 html 파일 ➡ jsp 형태로 만들기 (0)	2022.11.13
[73일차] 게시판 만들기 / 클래스 ➡ 컬렉션으로 사용하기 / 스프링에서 데이터를 받는 방법 (0)	2022.11.07
[72일차] 개발툴 / 스프링 프레임워크 / 마이바티스 / 스프링에서 bean생성하는 유형 (0)	2022.11.04
[71일차] JSON / 롬복 라이브러리 / 의존성 주입 / Spring-Test / MyBatis xml 파일 사용하기 (0)	2022.11.04

< Ajax >

< 파일 업로드 처리기능 구현 >

< bean 설정 및 라이브러리 추가 >

'🏫 Open API_JAVA' 카테고리의 다른 글

티스토리툴바