spring framework ajax 파일 업로드, 다중업로드

leverage
Programming/Web
2017. 1. 14.

ajax로 파일 업로드, 다중 업로드시 FormData 객체가 필요하다.

단, 구버전 IE 에서는 jquery.form.js 을 사용해야 한다.

ajaxUpload.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="resources/js/jquery-3.1.1.min.js"></script>
</head>

전송하기 버튼을 눌렀을 때 fileSubmit() 에서 ajax로 전송하게 된다.

이 때 핵심은 var formData = new FormData($("#fileForm")[0]);

FileUploadController.java

하나의 파일에서 모두 보여주기 위해 Controller에 업로드 관련코드를 모두 넣음

package com.jun7222.www.controller;

import java.io.File;
import java.util.Iterator;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Controller
public class FileUploadController {
	
	@RequestMapping(value = "/ajaxUpload")
	public String ajaxUpload() {
		return "ajaxUpload";
	}
	
	@RequestMapping(value = "/fileUpload")
	public String fileUp(MultipartHttpServletRequest multi) {
		
		// 저장 경로 설정
		String root = multi.getSession().getServletContext().getRealPath("/");
		String path = root+"resources/upload/";
		
		String newFileName = ""; // 업로드 되는 파일명
		
		File dir = new File(path);
		if(!dir.isDirectory()){
			dir.mkdir();
		}
		
		Iterator<String> files = multi.getFileNames();
		while(files.hasNext()){
			String uploadFile = files.next();
						
			MultipartFile mFile = multi.getFile(uploadFile);
			String fileName = mFile.getOriginalFilename();
			System.out.println("실제 파일 이름 : " +fileName);
			newFileName = System.currentTimeMillis()+"."
					+fileName.substring(fileName.lastIndexOf(".")+1);
			
			try {
				mFile.transferTo(new File(path+newFileName));
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		
		System.out.println("id : " + multi.getParameter("id"));
		System.out.println("pw : " + multi.getParameter("pw"));
		
		return "ajaxUpload";
	}
}

ajaxUpload.jsp 에 맞게 매핑해주고, 업로드 된 파일과

MultipartHttpServletRequest, MultipartFile 로 다중 업로드된 파일을 처리한다.

파일 2개와 id, pw를 입력한 후 전송하기 버튼을 누르면

파일 업로드하였다는 메시지가 뜸

이클립스 콘솔창에도 실제 파일 이름과, 입력한 id, pw 값을 확인할 수 있다.

또한 Controller 에서 설정한 경로로 파일이 업로드 된 것도 확인가능하다.

위 코드를 그대로 사용하게 되면 업로드 된 파일은

C:\Users\사용자 이름\워크스페이스 경로\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\프로젝트명\resources\upload

위 경로에서 확인 가능~

저작자표시 비영리 동일조건

'Programming > Web' 카테고리의 다른 글

아파치 톰캣 버전 노출 안보이도록 수정하기 (0)	2019.09.19
자바스크립트 클립보드 복사하기 clipboard.js (0)	2017.01.19
colorbox 설정, 사용법 정리 (0)	2016.12.18
javascript 숫자 오름차순 내림차순 정렬하기 sort() (0)	2016.09.29
2. 롤api 서버에서 웹페이지로 정보 출력하기 (6)	2015.12.21

leverage