FormData 및 <form> 으로 Javascript 데이터를 전송하기
submit 버튼으로 보내는 경우
1) HTML 소스
파일이 있는 경우 enctype="multipart/form-data" 로 지정해주어야 하며
파일이 없어도 상관없다.
* enctype : method가 post인 경우 enctype은 데이터의 MIME 타입을 말함.
<form id="testForm" action="/test" method="post" enctype="multipart/form-data">
<input type="text" name="aa" value="11">
<input type="text" name="bb" value="22">
<input type="file" name="cc">
<input type="submit">
</form>
2) 데이터 수신부 JAVA Controller 소스
파일이 있는 경우 파라미터 타입을 MultipartHttpServletRequest 타입으로 받고
파일이 없는 경우 HttpServletRequest 로 받는다.
@RequestMapping(value="/test", method = RequestMethod.POST)
@ResponseBody
public void test(MultipartHttpServletRequest req) throws Exception{
String test = req.getParameter("aa");
MultipartFile file = req.getFile("cc");
System.out.println(test);
System.out.println(file);
}
버튼에 함수 걸어서 fetch로 보내는 경우
1) HTML 소스
form 안에 타입 지정 안 하고 버튼을 만들면 기본값인 submit이 되어버려서 함수 거는 button은 form 밖에 만들었다.
<form id="testForm">
<input type="text" name="aa" value="11">
<input type="text" name="bb" value="22">
<input type="file" name="cc">
</form>
<button onclick="submit()">완료</button>
<script>
//fetch에서 Content-Type 은 지정하지 않는다.
function submit(){
let myform = document.getElementById('testForm');
formData = new FormData(myform);
fetch('http://localhost:8001/test',{
method:'POST',
body : myform
});
}
</script>
2) 데이터 수신부 Controller JAVA 소스
//JAVA Controller source
//MultipartHttpServletRequest 타입으로 받는다.
@RequestMapping(value="/test", method = RequestMethod.POST)
@ResponseBody
public void test(MultipartHttpServletRequest req) throws Exception{
String test = req.getParameter("aa");
MultipartFile file = req.getFile("cc");
System.out.println(test);
System.out.println(file);
}
FormData 객체를 직접 만들어서 보내는 경우
1) HTML 소스
<input type="text" id="aa" value="11">
<input type="text" id="bb" value="22">
<input type="file" id="cc">
<a onclick="submit1()">완료</a>
<script>
function submit1(){
let formData = new FormData();
formData.append('aa',document.getElementById('aa').value);
formData.append('bb',document.getElementById('bb').value);
formData.append('pic',document.getElementById('cc').files[0]);
fetch('http://localhost:8001/test',{
method:'POST',
body : formData
});
}
</script>
2) 데이터 수신부 Controller JAVA 소스
//JAVA Controller source
@RequestMapping(value="/test", method = RequestMethod.POST)
@ResponseBody
public void test(MultipartHttpServletRequest req) throws Exception{
String test = req.getParameter("aa");
MultipartFile file = req.getFile("cc");
}