본문 바로가기

안녕하세요!

프로그래밍 언어/JSP

JSP_22-11-15

PythonChoboman 2022. 11. 15. 18:29

[ 파일 올리기 ]

○ Apache commons IO 2.11.0v

https://mvnrepository.com/artifact/commons-io/commons-io

<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.11.0</version>
</dependency>

○ Apache commons IO 1.4v

https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload/1.4

<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

○ imgscarl A Java scaling Library 4.2

https://mvnrepository.com/artifact/org.imgscalr/imgscalr-lib/4.2

<!-- https://mvnrepository.com/artifact/org.imgscalr/imgscalr-lib -->
<dependency>
    <groupId>org.imgscalr</groupId>
    <artifactId>imgscalr-lib</artifactId>
    <version>4.2</version>
</dependency>

○ Javax Annotaion API 1.3.2

    - @Resource에 사용(자바 11버전 이상일 때)

https://mvnrepository.com/artifact/javax.annotation/javax.annotation-api/1.3.2

<!-- https://mvnrepository.com/artifact/javax.annotation/javax.annotation-api -->
<dependency>
    <groupId>javax.annotation</groupId>
    <artifactId>javax.annotation-api</artifactId>
    <version>1.3.2</version>
</dependency>

[ uploadForm.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"	uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"	uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%	request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 올리기</title>
<style>
iframe	{
	width:			800px;
	height:			800px;
	border:			1px;
	border-style:	solid;
}
</style>



</head>
<body>

<!-- 상단 메뉴 -->
<jsp:include page="../../common/topMenu.jsp" flush="false"/>

<div class="container">
	<!-- target="iframe1" -->
	<!-- 파일 업로드하면 원래는 action="${contextPath}/util/upload/uploadForm"으로 이동해야 하지만
		 페이지를 넘어가지 않기 위해서 제출된 결과를 iframe으로 보낸다. -->
	<form class="form-horizontal" action="${contextPath}/util/upload/uploadForm" method="post"
		enctype="multipart/form-data" target="iframe1">
		<!-- name="file"의 변수명과 컨트롤러의 MultipartFile file과 일치해야 한다. -->
		<div class="form-group">
			<div class="col-sm-8">
				<input type="file" class="btn btn-warning" name="file"/>
				<input type="submit" class="btn btn-primary" value="파일올리기"/>
			</div>
		</div>
		<!-- iframe에 업로드한 결과를 출력한다. -->
		<div class="form-group">
			<div class="col-sm-12">
				<iframe name="iframe1"></iframe>
			</div>
		</div>
	</form>
</div>

<!-- 하단 메뉴 -->
<jsp:include page="../../common/footer.jsp" flush="false"/>

</body>
</html>

 

[ UploadController.java ]

package com.edu.util.upload;

import java.io.File;
import java.util.UUID;

import javax.annotation.Resource;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

//-------------------------------------------------------------------------------------
// 파일 올리기 컨트롤러
// servlet-context.xml애 component-scan을 등록한다.
//-------------------------------------------------------------------------------------
@Controller
@RequestMapping(value = "/util/upload")
public class UploadController {

	private static final Logger logger = LoggerFactory.getLogger(UploadController.class);
	
	//-------------------------------------------------------------------------------------
	// sevlet-context.xml에서 선언한 파일 올리기 설정을 참조한다.
	// 자바 11부터는 @Resource를 사용하기 위해서
	// https://mvnrepository.com/artifact/javax.annotation/javax.annotation-api를 pom.xml에 추가한다.
	//
	// 파일 업로드 경로 : servlet-context.xml에 기술한다.
	//-------------------------------------------------------------------------------------
	@Resource(name = "uploadPath")
	// String uploadPath = "c:/data/upload"; <= 직접 기술해도된다.
	String uploadPath; // 파일 경로를 공통으로 사용하기 위해서 선언한다.
	
	
	//-------------------------------------------------------------------------------------
	// 파일 올리기 화면으로 이동
	//-------------------------------------------------------------------------------------
	@RequestMapping(value = "/uploadForm", method = RequestMethod.GET)
	public String uploadForm() {
		
		logger.info("UploadController 파일 올리기 화면으로 이동.....");
		
		return "/util/upload/uploadForm";
	} // End - 파일 올리기 화면으로 이동
	
	//-------------------------------------------------------------------------------------
	// 업로드된 파일 처리하기
	// MultipartFile file: 업로드한 파일이 저장된다.(임시경로)
	//-------------------------------------------------------------------------------------
	@RequestMapping(value = "/uploadForm", method = RequestMethod.POST)
	public ModelAndView uploadForm(MultipartFile file, ModelAndView mav) throws Exception {
		
		if(!file.isEmpty()) {
			System.out.println("첨부된 파일이 존재합니다.");
		} else {
			System.out.println("첨부된 파일이 존재하지 않습니다.");
		}
		
		System.out.println("파 일 이 름 : " + file.getOriginalFilename());
		System.out.println("파 일 크 기 : " + file.getSize());
		System.out.println("컨텐츠 타입 : " + file.getContentType());
		
		String savedName = file.getOriginalFilename();
		savedName = uploadFile(savedName, file.getBytes());
		
		mav.setViewName("util/upload/uploadResult");	// 뷰의 이름 : 처리가 끝나고 돌아갈 페이지
		mav.addObject("savedName", savedName);			// 전달할 데이터
		return mav;										// uploadResult.jsp로 포워딩 된다.		
	} // End - 업로드된 파일 처리하기
	
	//-------------------------------------------------------------------------------------
	// 파일 이름
	//-------------------------------------------------------------------------------------
	String uploadFile(String originalName, byte[] fileData) throws Exception {
		
		UUID uuid = UUID.randomUUID();
		
		// UUID = Universal Unuique IDentifier(범용 식별자) => 코드를 랜덤으로 만들어 낸다.
		String savedName = uuid.toString() + "_" + originalName;
		
		// new File(디렉토리, 파일이름);
		File target = new File(uploadPath, savedName);
		
		// 첨부파일을 임시 디렉토리에서 우리가 지정한 디렉토리로 복사한다.
		FileCopyUtils.copy(fileData, target);
		
		return savedName;
	}
	
	
	
	
	
	
} // End - 파일 올리기 컨트롤러

 

[ upLoadAjax.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"	uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"	uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%	request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>파일 올리기 (AJAX)</title>
<style>
	.fileDrop	{
		width:			1000px;
		height:			500px;
		border:			1px dotted blue;
	}
	small	{
		margin-left:	3px;
		font-weight:	bold;
		color:			gray;
	}

</style>
</head>
<body>

<!-- 상단 메뉴 -->
<jsp:include page="../../common/topMenu.jsp" flush="false"/>

<div class="container">
	<h2>Ajax File Upload</h2>
	<div class="fileDrop"></div>		<!-- 파일을 업로드할 영역 -->
	<div class="uploadedList"></div>	<!-- 업로드된 파일 목록을 출력할 영역 -->
</div>

<!-- 하단 메뉴 -->
<jsp:include page="../../common/footer.jsp" flush="false"/>


</body>

<script>
//-------------------------------------------------------------------------------------
// 스크립트는 jQuery를 불러들인 다음에 기술한다.
// 순서가 바뀌면 스크립트가 작동되지 않는다.
//-------------------------------------------------------------------------------------
$(function() {
	
	
	//-------------------------------------------------------------------------------------
	// 드래그의 기본 효과를 막는다.
	// 드래그의 기본효과를 막지 않으면 드래그된 곳에 이미지가 보이게 된다.
	//-------------------------------------------------------------------------------------
	$(".fileDrop").on("dragenter dragover", function(event) {
		event.preventDefault();
	})
	
	//-------------------------------------------------------------------------------------
	// 그림 전송 영역에 그림을 떨어뜨릴 때 처리하는 함수
	//-------------------------------------------------------------------------------------
	$(".fileDrop").on("drop", function(event) {
		alert("그림을 떨어뜨렸습니다.");
		// 그림이 drop될 때의 기본효과를 막는다.
		event.preventDefault();
	});
	
	// 첨부파일 배열 : 드래그된 파일의 정보
	// Ctrl + 클릭으로 여러 개의 파일을 동시에 올릴 수 있다.
	var files = event.originalEvent.dataTransfer.files;
	
	var file = files[0];	// 첫 번재 파일
	
	// 파일 정보가 콘솔에 올라간다.
	// 웹 브라우저에서 F12키를 누르면 어떤 파일인지 알 수가 있다.
	console.log(file);
	
	// AJAX로 서버에 전달할 대에는 폼이 별도로 존재하지 않기 대문에 폼 객체를 만들어 주어야 한다.
	var formData = new formData();	// 폼 객체
	
	// 폼에 file 변수를 추가한다.
	formData.append("file", file);
	
	// 서버에 파일을 업로드한다.
	// contentType : false => multipart/form-data로 처리가 된다.
	$.ajax({
		
	})
})


</script>


</html>

 

[ AjaxUploadController.java ]

package com.edu.util.upload;

import javax.annotation.Resource;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

//-------------------------------------------------------------------------------------
// AJAX 이용해 파일 올리기
//-------------------------------------------------------------------------------------
@Controller
@RequestMapping(value="/util/upload")
public class AjaxUploadController {

	private static final Logger logger = LoggerFactory.getLogger(AjaxUploadController.class);

	// 업로드할 경로(디렉토리)는 servlet-context.xml에 설정해 놓았다.
	@Resource(name = "uploadPath")
	String uploadPath;
	
	//-------------------------------------------------------------------------------------
	// 파일 올리기(AJAX) 화면 불러오기
	//-------------------------------------------------------------------------------------
	@RequestMapping(value="/uploadAjax", method=RequestMethod.GET)
	public String uploadAjax() {
		
		logger.info("AjaxUploadController 파일 올리기(AJAX) 화면 불러오기");
		return "/util/upload/uploadAjax";
		
	} // End - 파일 올리기(AJAX) 화면 불러오기
	
	
	
}

 

[ uploadResult.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"	uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"	uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%	request.setCharacterEncoding("UTF-8"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div class="container">
	<h2>파일이 업로드 되었습니다.</h2>
	<h3>파일명 : ${savedName}</h3>
</div>

</body>
</html>

 

[ MediaUtils.java ]

package com.edu.util.upload;

import java.util.HashMap;
import java.util.Map;

import org.springframework.http.MediaType;

//-------------------------------------------------------------------------------------
// 업로드에 사용할 미디어에 대한 정의 클래스
//-------------------------------------------------------------------------------------
public class MediaUtils {

	// static으로 선언되었으므로 프로그램이 실행될 때
	// private static Map<String, MediaType; 과 static{}은 바로 메모리에 로딩된다.
	private static Map<String, MediaType> mediaMap;
	
	//-------------------------------------------------------------------------------------
	// static block
	// 클래스를 로딩할 때 제일 먼저 실행되는 코드
	//-------------------------------------------------------------------------------------
	static {
		mediaMap	= new HashMap<>();
		mediaMap.put("JPG", MediaType.IMAGE_JPEG);
		mediaMap.put("GIF", MediaType.IMAGE_GIF);
		mediaMap.put("PNG", MediaType.IMAGE_PNG);
	}
	//-------------------------------------------------------------------------------------
	// 이미지 파일인지 아닌지 구분하는 메서드
	// 이미지 파일을 업로드하면 썸네일 파일을 만들고, 나머지 파일들은 그냥 업로드한다.
	// getMediaType(String type)을 호출하여
	// 위의 static{}에 있으면 이미지 파일, 아니면 일반 파일이다.
	//-------------------------------------------------------------------------------------
	public static MediaType getMediaType(String type) {
		
		// toUpperCase() => 대문자로 변경
		return mediaMap.get(type.toUpperCase());
		
	} // End - 이미지 파일인지 아닌지 구분하는 메서드
	
	
	
} // End - 업로드에 사용할 미디어에 대한 정의 클래스

 

[ topMenu.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%	request.setCharacterEncoding("UTF-8"); %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>	

<%	/*
	sticky-top은 상단 공간을 차지하면서 위에 고정하고,
	fixed-top은 상단 공간을 차지하지 않고 위에 고정된다.
	일부 내용이 상단 메뉴바에 가려져서 보이지 않을 수 있다.
	*/
%>
<nav class="navbar navbar-inverse navbar-sticky-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="${contextPath}/main.do">쇼핑몰</a>
		</div>
		<!-- 실질적인 메뉴를 나열한다. -->
		<div class="collapse navbar-collapse" id="myNavbar">
			<ul class="nav navbar-nav navbar-left">
				<li>
					<form class="navbar-form navbar-right" method="post" action="${contextPath}/member/login.do">
						<c:choose>
							<c:when test="${isLogOn == true && member != null}">
								<p class="navbar-text"><b>${member.name}님, 즐거운 시간되십시요.</b></p>
								<a href="${contextPath}/member/logout.do" class="btn btn-danger">
								<span class="glyphicon glyphicon-log-out"></span> 로그아웃</a>
							</c:when>
							<c:otherwise>
								<div class="form-group">
									<input type="text"     class="form-control" name="id"  size="12" maxlength="12" placeholder="아이디"/>
									<input type="password" class="form-control" name="pwd" size="12" maxlength="12" placeholder="비밀번호"/>
								</div>
								<button type="submit" class="btn btn-primary">
									<span class="glyphicon glyphicon-log-in"></span> 로그인
								</button>
							</c:otherwise>
						</c:choose>
					</form>
				</li>
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">회원관리 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="${contextPath}/member/loginForm.do">로그인</a></li>
						<li><a href="${contextPath}/member/memberForm.do">회원가입</a></li>
						<li><a href="${contextPath}/member/registerAjaxForm.do">회원가입(AJAX)</a></li>
						<li><a href="${contextPath}/member/listMembers.do">회원 목록 조회</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">파일 올리기 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="${contextPath}/util/upload/uploadForm">파일 올리기 (Form)</a></li>
						<li><a href="${contextPath}/util/upload/uploadAjax">파일 올리기 (Ajax)</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>

 

728x90
반응형

'프로그래밍 언어 > JSP' 카테고리의 다른 글

JSP_22-11-18  (0) 2022.11.18
JSP_22-11-17  (0) 2022.11.17
JSP_22-11-07  (0) 2022.11.15
JSP_22-11-14  (0) 2022.11.15

'프로그래밍 언어/JSP' Related Articles

loading

티스토리툴바