<form> 태그를 이용하는 방식: 브라우저의 제한이 없어야 하는 경우
- 일반적으로 페이지 이동과 동시에 첨부파일을 업로드하는 방식
Ajax를 이용하는 방식: 첨부파일을 별도로 처리하는 방식
- <input type='file>을 이용하고 Ajax로 처리하는 방식
- HTML5의 Drag And Drop 기능이나 jQuery 라이브러리를 이용해서 처리하는 방식
web.xml
<!-- 파일 업로드 -->
<multipart-config>
<location>C:\\upload\\tmp</location>
<max-file-size>20971520</max-file-size> <!-- 1024(kb) * 20 * 1024(mb) == 단일 파일 크기 20MB -->
<max-request-size>41943040</max-request-size> <!-- 한 번에 올리는 파일 크기 -->
<file-size-threshold>20971520</file-size-threshold> <!-- 메모리 사용 -->
</multipart-config> <!-- servlet-context.xml 추가 항목 필수(빈으로 관리) -->| multipart-config Settings | 설명 |
| file-size-threshold | 메모리 사용 |
| location | 업로드되는 파일을 저장할 공간 |
| max-file-size | 업로드되는 파일의 최대 크기 |
| max-request-size | 한 번에 올릴 수 있는 최대 크기 |
Tip) web.xml은 WAS(Tomcat) 설정으로, 업로드 처리는 MultipartResolver라는 타입의 객체를 빈으로 등록해야 한다.
servlet-context.xml
<context: component-scan base-package="org.zerock.controller" />
//첨부파일을 처리하는 빈의 id는 multipartResolver
<beans:bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver"></beans:bean>
1. <form> 방식의 파일 업로드
| MultipartFile의 메서드 | 설명 |
| String getName() | 파라미터의 이름 <input> 태그의 이름 |
| String getOriginalFileName() | 업로드되는 파일의 이름 |
| boolean isEmpty() | 파일이 존재하지 않는 경우 true |
| long getSize() | 업로드되는 파일의 크기 |
| byte[] getBytes() | byte[]로 파일 데이터 반환 |
| InputStream getInputStream() | 파일데이터와 연결된 InputStream 반환 |
| transferTo(File file) | 파일의 저장 |
2.Ajax를 이용하는 파일 업로드
jQuery를 이용해서 처리하면 편리
FormData 타입의 객체에 각 파일 데이터를 추가하는 것과 이를 Ajax로 전송할 때 약간의 옵션이 붙어야 한다
uploadAjax.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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>Upload with Ajax</h1>
<div class="uploadDiv">
<input type="file" name="uploadFile" multiple>
</div>
<button id="uploadBtn">Upload</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#uploadBtn").on("click", function(e) {
var formdata = new FormData();
var inputFile = $("input[name='uploadFile']");
var files = inputFile[0].files;
console.log(files);
//첨부파일 데이터를 formData에 추가
for (var i = 0; i < files.length; i++) {
formData.append("uploadFile", files[i]);
}
$.ajax({
url : '/uploadAjaxAction',
processData : false, //이렇게 지정해야 전송됨
contentType : false, //이렇게 지정해야 전송됨
data : formData, //ajax를 통해 전송
type : 'POST',
success : function(result) {
alert("Uploaded");
}
}) //ajax
});
})
</script>
</body>
</html>
P504 하다가 ajax내용이 계속되길래 JS하러감 ㅎㅎ^^;;;
UploadController.java
@PostMapping("/uploadAjaxAction")
public void uploadAjaxPost(MultipartFile[] uploadFile) {
//log.info();
}
첨부파일 삭제 P545
회사에서는 하드에 있는 건 안전하게 지우진 않고 list만 지움
첨부파일의 삭제 고민