[AJAX] Upload 하기 => FormData

[ 파일upload AJAX 처리 ]

( HTTP 방식 처리 )
<form action method=post encType = "multipart/form-data" >
<input type = "file" ... >
<input type = "submit" ... >

MultipartFile mf1 = dto.getFile1();


[ AJAX 방식 ]
<form id="uploadForm">
<input type = "file" ... >
<input type="button" ...>

- 최소한의 입력 form만 만들고,
=> method / encType 등 업로드 설정은 JavaScript / AJAX 에서 한다.

$("#uploadBTN").on("click", function(e){
e.preventDefault();

var form = $("#uploadForm")[0];
var data = new FormData(form);

$.ajax({
url : "ajaxUpload",
data : data,
type : "post",
dataType : "json",

encType : "multipart/form-data",
processData : false, // URL name=value&... 형식의 processData 사용 안하겠다
contentType : false, // setContentType ( test/html ) 이 기본 타입을 사용하지 않겠다.

success : function(resp){ }




( Http 방식에서 MultipartFile 객체로 파일 받던거)
MultipartFile mf1 = dto.getFile1();
==> AJAX
JavaSciprt 객체인 FormData 를 이용해야 한다
그러기 위해서, 일단 (파일을 담은 form 태그) jquery 객체를
=> JavaScript 변수로 바꿔야 사용할 수 있다.

var form = $("#uploadForm")[0];
[0] : jquery 객체 ===변환===> JavaScript 변수

그리고 나서, 그 변수로 FormData 객체를 생성
var data = new FormData(form);


이 객체가 바로 == MultipartFile 의 객체 랑 같은 것

이걸 AJAX 에서 JSON 형태로 서버로 보내면
=> 서버에서는 MultipartFile 객체로 파라미터로 받아서 사용한다.

@ResponseBody
@PostMapping(value ="/ajaxUpload", produces= {"application/json; charset=utf-8"})
public String uploadajax(MultipartFile uploadfile) throws IOException {



여기까지만 하면 나머진 똑같다.

String savePath = "c:/upload/";

String originalname1 = uploadfile.getOriginalFilename();
String onlyfilename = originalname1.substring(0, originalname1.indexOf("."));
String extname = originalname1.substring(originalname1.indexOf("."));
String newname = onlyfilename + "(" + UUID.randomUUID().toString()+")" + extname;
File serverfile1 = new File(savePath + newname);
uploadfile.transferTo(serverfile1);

return "{\"result\" : \"파일 업로드 성공\"}";

리턴값만 적절하게 JSON 보내주면 AJAX 형식으로 업로드 시킨 후,
그 페이지에서 SPA 방식으로 응답을 줄 수 있다.