FormData

XMLHTTPRequest 레벨2는 FormData 인터페이스를 지원한다. 폼데이터 객체는 폼필드의 키-밸류 쌍을 쉽게 구성하여 XHR를 통해 전달할 수 있도록 한다.

생성

다음 구문을 통해 생성한다.

new FormData([HTMLFormElement])

새로운 폼데이터를 생성할 때 문서내의 폼 요소를 인자로 전달하여 폼데이터를 구성할 수 있는데, 폼 요소가 없더라도 .append() 메소드를 사용해서 데이터를 구성할 수 있다.

데이터 추가

데이터를 추가하기 위해서는 FormData 객체의 append() 메소드를 사용한다.

formd.append('fieldname', 'fieldvalue');

바이너리 데이터는 Blob 이나 File 객체를 전달할 수 있다.

formd.append('fieldname', file_object, 'filename');

예제

var xhr = new XMLHttpRequest();
xhr.onload = function(complete){console.log(complete.target.responseText);};
var data = new FormData();
data.append('name', 'my_name');
data.append('phone', '123-456-7890');
xhr.open('post', 'http://some.domain.com/api/post.php', false); // false는 비동기방식
xhr.send(data);

참고로 XMLHttpRequest를 사용한 폼 전송의 디폴트 enctype 속성은 multipart/form-data로 정해진다. (변경 방법이 있는지는 모르겠다.)