FormData

• HTML내의 <Form> 내부 데이터를 가져오거나 새로운 데이터 생성 가능
  • Form 내 파일이나 이미지를 Ajax로 전송할 때 주로 사용

setting

dispatcher-servlet.xml

<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver"/>

pom.xml

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.4</version>
</dependency>

메서드

.append()

formData.append(key, value, [filename]);

• 기존 key에 새로운 value를 추가하거나 새로운 key-value를 추가
• 같은 key에 여러 value를 추가하면 배열화됨

formData.append("name", "홍길동");
formData.append("name", "김유신");
// ["홍길동", "김유신"]

.delete()

formData.delete(key);

• 키 이름으로 해당 데이터 삭제

.entries()

formData.entries()

• 키-값을 모두 순회

var formData = new FormData();
formData.append('이름','홍길동');
formData.append('나이','24세');

for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]);
}				// 키		// 값

.get()

formData.get()

• 키로 값 검색

formData.append('username', '홍길동');
formData.get('username'); // 반환값: 홍길동

.set()

formData.set(key, value[, filename])

• 키-값을 설정해서 새로운 데이터를 추가

formData("username", "홍길동")

🟣set과 append의 차이

• set은 기존 키에 값을 설정 할 경우 새로운 값으로 교체됨
• append는 기존 키에 값을 설정할 경우 배열의 끝에 새로운 값을 추가

.values()

formData.values()

• 키-값을 순회해서 값을 반환

var formData = new FormData();
formData.append('이름','홍길동');
formData.append('나이','24세');

for (var value of formData.values()) {
   console.log(value);
}

주의 할 점

• input type이 number일 경우, 빈 값을 넘길 경우 error 발생
  • input type이 text일 경우 빈 값도 넘어감
• ajax 옵션 중 processData, contentType이 false여야 함

예제

<form id="test">
	<input type="text" name="ename">
    <input type="text" name="deptno">
</form>

<script>
	var form = $("#test")[0]
	var data = new FormData()
    
	$.ajax({
    	url: "어쩌구",
        data: data,
        processData: false,
        contentType: false,
        type:'post',
        success: function(){
        	...
        }
    })
</script>

type을 간과하기 쉬우니 주의

---

참고 https://developer.mozilla.org/en-US/docs/Web/API/FormData
https://velog.io/@yoonee1126/spring-ajax%EB%A1%9C-formData-%EC%A0%84%EB%8B%AC-%EC%8B%9C-VO%EB%A1%9C-%EB%AA%BB-%EB%B0%9B%EB%8A%94-%ED%98%84%EC%83%81