이 기능은 Mozilla Central (trunk)에 탑재됐고, 당분간 Firefox Nightly Build에서만 사용할 수 있습니다.

XMLHttpRequest 레벨 2 (편집자 초안)에는 새로운 FormData 인터페이스에 대한 지원이 추가됐습니다. FormData 객체는 폼의 각 필드와 값을 나타내는 키/값 쌍들의 집합을 쉽게 구성할 수 있는 방법을 제공하며, 이를 이용하면 데이터를 “multipart/form-data” 형식으로 XMLHttpRequest의 send() 메소드를 사용하여 쉽게 전송할 수 있습니다.

FormData가 유용한 이유

웹 페이지에서 서버로 복합적인 데이터(파일, 아스키 텍스트가 아닌 콘텐트 등)를 전송하기위해서는 콘텐트 유형으로 multipart/form-data를 사용해야 합니다. form 태그 안에 콘텐트 유형(content type)을 설정하기 위해서는 다음과 같이 작성해야 합니다.

<form method="post" enctype="multipart/form-data" action="http://foo.bar/upload.php">
<input type="file" name="media"/>

<input name="nickname"/>
<input name="website"/>
<input type="submit" value="upload"/>

</form>

이 예제는 우리가 일반적으로 파일을 업로드 할 때 사용하는 방법입니다.

Firefox 3.6에서는 자바스크립트에서 파일을 다룰 수 있게 되었습니다.(File API 참조). 그러므로, 여러분은 XMLHttpRequest를 사용하여 파일을 전송하고 싶을 지도 모릅니다. 하지만, 예를 들어 이러한 폼을 재현하고자 한다면, multipart/form-data 콘텐트를 직접 자바스크립트로 생성해야 하기 때문에 매우 어려울 것입니다(예로써 이 코드는 제가 multipart/form-data를 구현하기 위해 얼마전에 작성한 코드입니다. 느리고 보기 좋지 않습니다).

바로 이런 상황에서 FormData가 유용합니다. 즉, 자바스크립트로 폼 전송 체계를 구현할 때입니다.

FormData 객체

FormData 객체는 XMLHttpRequest를 사용하여 전송할 수 있도록 키/값 쌍들의 집합을 컴파일 해 줍니다. 이 객체는 다음과 같은 하나의 메소드 만을 가집니다.

append(key, value);

key 부분은 값의 이름이고, value 부분은 값으로 파일이나 문자열이 올 수 있습니다.

FormData 객체를 생성하고 값을 추가한 후 XMLHttpRequest를 사용하여 전송할 수 있습니다. 만약 앞의 예제를 그 대로 FormData 객체를 사용하여 구현한다면 다음과 같습니다.

// aFile은 input type="file" 이나 드래그 앤 드롭된 파일로 부터 온 값입니다.

var formdata = new FormData();
formdata.append("nickname", "Foooobar"); 

formdata.append("website", "http://hacks.mozilla.org");
formdata.append("media", aFile);
var xhr = new XMLHttpRequest();

xhr.open("POST", "http://foo.bar/upload.php");  
xhr.send(formdata);

FormData 와 <form> 엘리먼트

Firefox는 HTML from 엘리먼트를 조금 확장하여 폼의 데이터를 FormData로 얻게 해 주는 getFormData() 메소드를 추가했습니다. 이 부분은 아직 HTML 표준은 아니지만 앞으로 표준 명세에 추가되기를 기대하고 있습니다(물론 이름은 변경될 여지가 있습니다).

var formElement = document.getElementById("myFormElement");

var xhr = new XMLHttpRequest();
xhr.open("POST", "submitform.php");

xhr.send(formElement.getFormData());

다음의 코드와 같이 폼에서 FormData를 얻은 후 여기에 데이터를 추가하여 전송할 수도 있습니다.

var formElement = document.getElementById("myFormElement");

formData = formElement.getFormData();
formData.append("serialnumber", serialNumber++);
xhr.send(formData);

이러한 기능은 사용자가 폼에서 편집할 필요가 없는 부가적인 정보를 폼 전송전에 추가하여 폼 데이터를 보완할 수 있게 해 줍니다.

참고자료

• MDN: XMLHttpRequest FormData
• MDN: Using FormData
• W3C the FormData interface
• W3C the multipart/form-data content type
• Bug 546528 – Implement FormData

원저자: Paul Rouget – 원문으로 가기