메리

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");
}