728x90
반응형
AWS 클라우드환경 네이티브 수업 122 일차
진행
1. 웹 제작 -
요약
1. 웹 제작 -
Ajax로 파일 업로드 해보기(드래그 사용)
// 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> mediaMap;과
// static{}(스태틱 블록)은 바로 메모리에 로딩된다.
private static Map<String, MediaType> mediaMap;
//=====================================================
// statick block
// 클래스를 로딩할 때 제일 먼저 실행되는 코드
//=====================================================
static {
mediaMap = new HashMap<String, MediaType>();
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 - public class MediaUtils
// 컨트롤러 설정
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 - public String uploadAjax()
} // End - public class AjaxUploadController
<!-- 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: 100%;
height: 200px;
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>
<!-- footer -->
<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]; //첫번째 파일
// 파일정보가 콘솔에 올라간다.
console.log(file);
// AJAX로 서버에 전달할 때에는 폼이 별도로 존재하지 않기 때문에 폼 객체를 만들어 주어야 한다.
var formData = new FormData(); // 폼 객체
// 폼에 file 변수를 추가한다.
formData.append("file", file);
// 서버에 파일을 업로드한다.(백그라운드에서 실행이 된다.)
// enctype="multipart/form-data" target="iframe1"
// contentType : false => multipart/form-data로 처리가 된다.
$.ajax({
})
});
</script>
</html>
이후는 다음 수업 때...
728x90
반응형
'코딩수업 > AWS 클라우드환경 네이티브' 카테고리의 다른 글
| 11/17 웹 제작 - 주소 검색 기능(Daum API) / 날짜 검색 기능 (0) | 2022.11.28 |
|---|---|
| 11/15 웹 제작 - 파일 업로드 / Maven Repository 참고사항 (0) | 2022.11.28 |
| 11/14 웹 제작 - MySQL에서 ERD 생성 / Ajax / Ajax를 이용한 jQuery 사용 / Jackson (0) | 2022.11.28 |
| 11/11 웹 제작 - 로그아웃 / 회원 가입 / 회원 리스트 목록 / 회원 정보 수정, 삭제 / Redirect 와 Forward (0) | 2022.11.24 |
| 11/10 웹 제작 - @Component와 @Bean / 도서 쇼핑몰 제작 (로그인) (0) | 2022.11.23 |
댓글