FormData

 

---

 

1. FormData 란?

FormData 라는 자바스크립트 객체가 있습니다.

HTML5의 <form> 태그를 대신 할 수 있는 객체 입니다.

FormData는 다음과 같이 객체 생성후 사용 할 수 있습니다.

var formData = new FormData();
var formData = new FormData(document.getElementById('폼 아이디'));
var formData = new FormData($('form')[0]);

 

2. FormData의 활용

보통은 HTML상에서 <form> 태그를 사용해서 submit 버튼을 만들어서 전송 합니다.

ajax로 비동기로 데이터를 전송 해야 할때는 보통 json 데이터를 전송 합니다.

하지만 파일을 전송해야 하거나, 이미지를 전송해야 하는데, 비동기로 전송 하고 싶은 경우에는 어떻게 해야 할까요?

이럴때 FormData 객체를 활용 할 수 있습니다.

전송 방식은 ajax의 비동기 방식을 사용하고 전송 데이터 포맷은 json이 아닌 form의 포맷인 것 입니다.

var form = $('form')[0];
var formData = new FormData(form);
formData.append("imageFile", event.target.files);

$.ajax({
        url: (url),
        processData: false,
        contentType: false,
        type: 'POST',
        data: formData,
        success: function (mesg) {},
        error: function (xhr, status) {}
    });

 

3. FormData 함수

formData.append(name, value) 

- form의 name 과 value 를 필드의 추가 합니다.

- 여기서 name은 input의 name 과 value 역할을 한다고 생각 하시면 됩니다.

 

formData.append(name, blob, fileName)

- input 의 type 이 'file' 인 경우에 사용 합니다.

- fileName은 file의 이름의 해당 합니다.

 

formData.delete(name)

- 주어진 name 으로 필드를 제거 합니다.

 

formData.get(name)

- 주어진 name 의 해당 하는 필드 value를 반환 합니다.

 

formData.getAll(name)

- append 함수로 추가시 name이 중복 가능 합니다.

- 따라서 주어진 name 의 해당 하는 필드의 모든 value를 반환 합니다.

 

formData.has(name)

- 주어진 name 의 해당하는 필드가 있을 경우 true, 없으면 false를 반환 합니다.

 

formData.set(name, value),  formData.set(name, blob, fileName)

- set 함수는 append 함수 처럼 필드를 추가 시켜줍니다.

- append 함수와 차이점은 기존의 name의 해당하는 모든 필드를 제거 한 후에 추가 시켜줍니다.

 

4. formData 주의 사항

- formData.append(name, value) 함수를 이용해 데이터를 넣을시에 value는 문자열로만 입력 됩니다.

객체를 넣으면 무시되고 'Object1' 처럼 문자열로 입력 됩니다.

- 아래 처럼 FormData 초기화 시에는 해당 <form> 태그의 입력되어 있던 값이 그대로 입력 됩니다.

var formData = new FormData(document.getElementById('폼 아이디'));
var formData = new FormData($('form')[0]);