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을 간과하기 쉬우니 주의
