본문으로 바로가기

0915-SpringMvcJson4 & SpringMiniProject-Tiles

category 개발 2022. 9. 15. 17:47

SpringMvcJson4 : 파일추가 

 

파일 하나 추가하는방법

ex4.jsp

 

  • FormData 인터페이스 의 append() 메서드 는 FormData 객체 내부의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가합니다.
append(name, value)
append(name, value, filename)
<script type="text/javascript">
	$(function(){
		// 카메라 아이콘 클릭시 file 태그 클릭한 효과주기 
		$(".fa-camera").click(function(){
			$("#photoupload").trigger("click");
		});
		
		/*
			processData:false => 서버에 전달하는 데이터는 query string 이라는 형태로 전달된다 
			파일 전송의 경우 이를 하지 않아야 하는데 그 설정이 false,
			contentType:false => enctype이 원래 기본값이 application/x-www... 이거인데
			multipart/form-data로 변경해준다 
		*/
				
		// file 태그 변경시 이벤트
		$("#photoupload").change(function(e){
			var form = new FormData();
			form.append("upload", $("#photoupload")[0].files[0]); // 선택한 1개만 추가 
			
			$.ajax({
				// upload는 무조건 type post
				type:"post",
				dataType:"json",
				url:"oneupload", // JsonTestController2.java
				processData: false,
				contentType:false,
				data:form,
				success:function(res){
					//전송받은 파일명을 img 태그로 만들기
					console.log(res.photoname); // controller key value
					let s = "<img src='upload/" + res.photoname +"'>";
					
					$("#photos").append(s);
				}
				
			});
		});
	});
</script>
</head>
<body>
	<h3 class="alert alert-info">Ex4번 예제 - 1 개씩 업로드</h3>
	
	<input type="file" id="photoupload">
	<i class="fa fa-camera" style="font-size:48px;color:red"></i>
	<div id="photos"></div>
</body>
</html>

 

JsonTestController2.java

  • form.append("upload", $("#photoupload")[0].files[0]); 
  • public Map<String, String> fileUpload(@RequestParam("upload") MultipartFile multi, HttpServletRequest request)
@PostMapping("/oneupload")
	public Map<String, String> fileUpload(@RequestParam("upload") MultipartFile multi,
			HttpServletRequest request)
	{
		// 업로드될 경로 구하기 
		String path = request.getSession().getServletContext().getRealPath("/resources/upload");
		
		// 업로드될 파일명 구하기(현재날짜로 파일명 변경) 
		String fileName = ChangeName.getChangeFileName(multi.getOriginalFilename());
		
		// 업로드
		try {
			multi.transferTo(new File(path + "/" + fileName));
		} catch (IllegalStateException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		Map<String, String> map = new HashMap<String, String>();
		map.put("photoname", fileName); // 변경된 파일명을 json으로 보내기 
		
		return map;
	}

 

여러장 업로드 하는 방법

ex5.jsp

 

<script type="text/javascript">
	$(function(){
		// 카메라 아이콘 클릭시 file 태그 클릭한 효과주기 
		$(".fa-camera").click(function(){
			$("#photoupload").trigger("click");
		});
		
		/*
			processData:false => 서버에 전달하는 데이터는 query string 이라는 형태로 전달된다 
			파일 전송의 경우 이를 하지 않아야 하는데 그 설정이 false,
			contentType:false => enctype이 원래 기본값이 application/x-www... 이거인데
			multipart/form-data로 변경해준다 
		*/
				
		// file 태그 변경시 이벤트
		$("#photoupload").change(function(e){
			var form = new FormData();
			for(i=0;i<$("#photoupload")[0].files.length;i++)
			{
				form.append("upload", $("#photoupload")[0].files[i]); // 선택한 사진 모두 추가
			}
			
			$.ajax({
				// upload는 무조건 type post
				type:"post",
				dataType:"json",
				url:"multiupload", // JsonTestController2.java
				processData: false,
				contentType:false,
				data:form,
				success:function(res){
					console.dir(res); // 배열형태 그대로 확인 가능 
					// res를 스프링에서 List<Map> 이 형태로 반환
					let s ="";
					$.each(res, function(i,elem){
						s += "<figure>";
							s+="<img src='upload/" +elem.photoname +"'>";
							s+="<figcaption>";
								s+=elem.photosize;
							s+="</figcaption>";
						s += "</figure>";
					});
					
					$("#photos").append(s);
				}
				
			});
		});
	});
</script>

</head>
<body>
	<h3 class="alert alert-info">Ex5번 예제 - 여러장 업로드</h3>
	
	<input type="file" id="photoupload" multiple="multiple"><!-- 여러개 선택 -->
	<i class="fa fa-camera" style="font-size:48px;color:red"></i>
	<div id="photos"></div>

</body>

 

JsonTestController2.java

 

// 여러사진 업로드 - 반환타입은 List<Map>
	@PostMapping("/multiupload")
	// ex5.jsp
	public List<Map<String, String>> multiUpload(HttpServletRequest request,
			List<MultipartFile> upload)
	{
		// 업로드될 경로 구하기 
		String path = request.getSession().getServletContext().getRealPath("/resources/upload");
		
		List<Map<String, String>> list = new ArrayList<Map<String,String>>();
		
		// 여러개 파일이므로 반복문으로 처리한다 
		int idx = 1; // 동시에 업로드시 시간이 완전 같아서 일부가 같은 사진이 나오는 문제 해결을 위해서 
		
		for(MultipartFile file:upload)
		{
			// 각 파일의 이름 변경해서 업로드하기 
			String photoname = ChangeName.getChangeFileName(file.getOriginalFilename());
			photoname = idx + "_" + photoname;
			idx++;
			
			// 변경된 파일 이름으로 파일 객체 생성 
			File _file = new File(path + "/" + photoname);
			
			// 변경된 파일이름으로 업로드 
			try {
				file.transferTo(_file);
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
			
			// 파일 사이즈
			String photosize = ((long)((_file.length()/1024.0)*10))/10.0+"kb";
			
			// 업로드후 파일명과 파일 사이즈 구해서 map 에 넣은 후 list 에 추가 
			Map<String, String> map = new HashMap<String, String>();
			map.put("photoname", photoname); // ex5.jsp에 key 값으로 사용
			map.put("photosize", photosize);
			
			list.add(map);
		}
		
		return list;
	}

 

home.jsp

<h4><a href="jsonex4">Json예제 4</a></h4>
<h4><a href="jsonex5">Json예제 5</a></h4>

 

HomeController.java

  • jsp file에 href(링크 주소) 만들게 되면 @GetMapping을 꼭 해줘야한다.
	@GetMapping("jsonex4")
	public String ex4()
	{
		return "ex4";
	}
    
    @GetMapping("jsonex5")
	public String ex5()
	{
		return "ex5";
	}

 

 

SpringMiniProject: Tiles 사용법 

- layout1 하다가 말았음

 

servlet-context.xml

  • mapping 해주기 
<resources location="/resources/image/" mapping="/image/**"/>
<resources location="/resources/upload/" mapping="/upload/**"/>

Tiles Resolver

<!-- Tiles Resolver -->
	<beans:bean id="tilesConfigurer" 
		class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
		<beans:property name="definitions">
			<beans:list>
				<beans:value>/WEB-INF/tiles/tilesdef.xml</beans:value>
			</beans:list>
		</beans:property>
		<beans:property name="preparerFactoryClass"
			value="org.springframework.web.servlet.view.tiles3.SpringBeanPreparerFactory"/>
	</beans:bean>
	
	<beans:bean id="viewResolver"
		class="org.springframework.web.servlet.view.UrlBasedViewResolver">
		<beans:property name="viewClass"
			value="org.springframework.web.servlet.view.tiles3.TilesView"/>
	</beans:bean>

 

tilesdef.xml

  • definition name 이랑 macro extends명이랑 같아야된다 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
   	"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
	<definition name="layout1" template="/WEB-INF/layout/layout1.jsp">
		<put-attribute name="header" value="/WEB-INF/layout/header.jsp"/>
		<put-attribute name="menu" value="/WEB-INF/layout/menu.jsp"/>
		<put-attribute name="info" value="/WEB-INF/layout/info.jsp"/>
		<put-attribute name="main" value="/WEB-INF/layout/main.jsp"/> <!-- 파일경로가 바뀜 macro -->
	</definition>
	
	<!-- macro -->
	<definition name="/bit/*/*" extends="layout1"> <!--extends = <definition name="layout1"  -->
		<!-- main 이름 바뀌는거 /bit/어쩌구/어쩌구 =>  /WEB-INF/뭐/뭐뭐.jsp"-->
		<put-attribute name="main" value="/WEB-INF/{1}/{2}.jsp"/> 
	</definition>
</tiles-definitions>

 

layout1.jsp

  • <tiles:insertAttribute name="main"/>  : menu 링크 클릭시 변경되는곳 
<body>
	<div class="mainlayout1">
		<div class="main" id="header">
			<tiles:insertAttribute name="header"/> <!-- <put-attribute name="header" value="/WEB-INF/layout/header.jsp"/> -->
		</div>
		<div class="main" id="menu">
			<tiles:insertAttribute name="menu"/>
		</div>
		<div class="main" id="info">
			<tiles:insertAttribute name="info"/>
		</div>
		<div class="main" id="main">
			<tiles:insertAttribute name="main"/> 
		</div>	
	</div>
</body>

 

menu.jsp

 

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>    

<c:set var="root" value="<%=request.getContextPath() %>"/>
	<a href="${root }/">Home</a>
	&nbsp;&nbsp;
	<a href="${root }/board/list">게시판</a>
	&nbsp;&nbsp;
	<a href="${root }/member/list">회원가입</a>
	&nbsp;&nbsp;
	<a href="${root }/help/map">구글맵</a>

 

HomeController.java

package com.bit.mini;

 import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
	@GetMapping("/")
	public String home()
	{
		return "/bit/layout/main"; // tilesdef.xml => WEB-INF/layout/main.jsp 가 메인페이지로 
	}
	
	@GetMapping("/board/list")
	public String board()
	{
		return "/bit/board/boardlist";
	}
	
	@GetMapping("/member/list")
	public String member()
	{
		return "/bit/member/memberlist";
	}
	
	@GetMapping("/help/map")
	public String map()
	{
		return "/bit/help/googlemap";
	}
}

 

 

결과창

'개발' 카테고리의 다른 글

리스너(Listener)  (0) 2023.04.02
사용자 정의 쿠키  (0) 2023.04.02
세션과 필터  (0) 2023.03.28
10/27 - myphoto(useNavigate, .env, 상세페이지, 업데이트)  (0) 2022.10.30
10/26 -Provider, 부모 자식간 통신, useContext, axios  (0) 2022.10.26
댓글 , 엮인글
hdev
블로그 이미지 hihhh 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바