반응형
#핵심 1: Spring에서는 2개이상의 파일을 업로드시 parameter 이름은 동일하게 부여해야 한다.
#핵심 2 :파일 n개 업로드 / 다량(Arraylist와 배열을 사용한다)
Multipart resolver(file upload handling)는 한 개의 값을 받아올 수 있다. 갯수가 많다면, ArrayList로 받아오게 되는데,
ArrayList로 넘겨준다. 하지만, 2개의 parameter를 넘겨줄 수 있는 능력이 없기에 prameter를 하나로 고정시켜서 보낸다.
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>
<script type="text/javascript">
function send1(f) {
let title = f.title.value.trim();
let photo1 = f.photo[0].value;
let photo2 = f.photo[1].value;
if(title=='') {
alert("제목을 입력하세요!!");
f.title.value="";
f.title.focus();
return;
}
if(photo1==""){
alert("사진1을 선택하세요!!");
return;
}
if(photo2==""){
alert("사진2를 선택하세요!!");
return;
}
f.action = "upload3.do";
f.submit();
}
</script>
</head>
<body>
<hr>
화일 2개 업로드<br>
(Spring에서는 2개이상의 파일을 업로드시 parameter이름은 동일하게 부여해야 한다)
<hr>
<form method="POST" enctype="multipart/form-data">
<div>
제목 : <input name="title">
</div>
<div>
사진1 : <input type="file" name="photo">
</div>
<div>
사진2 : <input type="file" name="photo">
</div>
<div>
<input type="button" value="2개 파일 업로드" onclick="send1(this.form);">
</div>
</form>
</body>
</html>
Controller 생성하기
// parameter이름이 동일하면 배열 또는 List로 받는다
// /upload3.do?title=제목&photo=a.jpg&photo=b.jpg
@RequestMapping("/upload3.do")
public String upload3(String title,
@RequestParam(name="photo") MultipartFile [] photo_array,
Model model) throws Exception {
// 웹경로
String webPath = "/resources/images/";
// 절대경로(위에 webPath의 절대경로가 어디냐)
String absPath = application.getRealPath(webPath);
String filename1="no_file";
String filename2="no_file";
for(int i=0; i<photo_array.length; i++) {
MultipartFile photo = photo_array[i];
if(!photo.isEmpty()) {
// 업로드된 파일명을 구한다.
String filename = photo.getOriginalFilename();
// 저장 경로 및 파일
File f = new File(absPath,filename);
if(f.exists()) { // 동일 화일이 존재하냐?
// 시간_파일명 이름변경
long tm = System.currentTimeMillis();
filename = String.format("%d_%s", tm, filename);
f = new File(absPath,filename);
}
// spring이 저장해놓은 임시 파일을 복사해온다.
photo.transferTo(f);
if(i==0)
filename1 = filename;
else
filename2 =filename;
}// end:for
// model통해서 request binding
model.addAttribute("title",title);
model.addAttribute("filename1",filename1);
model.addAttribute("filename2",filename2);
}
return "result3";
}
result3 결과값 보여줄 jsp 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>result3 사진 2개받기 웹사이트</title>
</head>
<body>
<hr>
제목 : ${ requestScope.title }
<hr>
<img alt="" src="resources/images/${ filename1 }" width="200">
<img alt="" src="resources/images/${ filename2 }" width="200">
</body>
</html>
파일 n개 업로드 / 다량(Arraylist와 배열을 사용한다)
input 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>
<script type="text/javascript">
function send1(f) {
let title = f.title.value.trim();
if(title=='') {
alert("제목을 입력하세요!!");
f.title.value="";
f.title.focus();
return;
}
if(f.photo.files.length==0 || f.photo.files.length>5) {
alert("업로드할 1~5개 이미지를 선택하세요!");
return;
}
f.action = "upload4.do";
f.submit();
}
</script>
</head>
<body>
<hr>
화일 n개 업로드<br>
(Spring에서는 2개이상의 파일을 업로드시 parameter이름은 동일하게 부여해야 한다)
<hr>
<form method="POST" enctype="multipart/form-data">
<div>
제목 : <input name="title">
</div>
<div>
사진 : <input type="file" name="photo" multiple="multiple">
</div>
<div>
<input type="button" value="n개 파일 업로드" onclick="send1(this.form);">
</div>
</form>
</body>
</html>
Controller 작성하기
// parameter이름이 동일하면 배열 또는 List로 받는다
// /upload4.do?title=제목&photo=a.jpg&photo=b.jpg
@RequestMapping("/upload4.do")
public String upload4(String title,
@RequestParam(name="photo") List<MultipartFile> photo_list,
Model model) throws Exception {
// 웹경로
String webPath = "/resources/images/";
// 절대경로(위에 webPath의 절대경로가 어디냐)
String absPath = application.getRealPath(webPath);
// 사용자 마음대로 갯수를 랜덤으로 보내기 때문에 설정해야한다.
List<String> filename_list = new ArrayList<String>();
for(MultipartFile photo : photo_list) {
if(!photo.isEmpty()) {
// 업로드된 파일명을 구한다.
String filename = photo.getOriginalFilename();
// 저장 경로 및 파일
File f = new File(absPath,filename);
if(f.exists()) { // 동일 화일이 존재하냐?
// 시간_파일명 이름변경
long tm = System.currentTimeMillis();
filename = String.format("%d_%s", tm, filename);
f = new File(absPath,filename);
}
// spring이 저장해놓은 임시 파일을 복사해온다.
photo.transferTo(f);
filename_list.add(filename);
}
}// end:for
model.addAttribute("title",title);
model.addAttribute("filename_list",filename_list);
return "result4";
}
result jsp 작성하기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>result3 사진 여러개받기 웹사이트</title>
</head>
<body>
<hr>
제목 : ${ requestScope.title }
<hr>
<c:forEach var="filename" items="${ filename_list }">
<img alt="" src="resources/images/${ filename }" width="200">
</c:forEach>
</body>
</html>
반응형
'SpringBoot↗' 카테고리의 다른 글
| Spring 답변형 게시판 작성 가이드 (0) | 2024.07.23 |
|---|---|
| Spring PhotoGallery DataBase DS (0) | 2024.07.22 |
| [오류해결]Spring 글씨깨짐 (0) | 2024.07.20 |
| Spring DB FileUpload (0) | 2024.07.19 |
| Spring 2일차 DataBase에서 parameter값 가져오기 (0) | 2024.07.19 |