검사 및 수정을 위한 FormData 메서드

Sam Thorogood

FormData는 XHR 사용자의 베스트 프렌드이며 Chrome 50에서 업그레이드됩니다. FormData 객체를 검사하거나 사후에 수정할 수 있는 메서드가 추가됩니다. 이제 get(), delete(), entries, keys 등의 반복 도우미를 사용할 수 있습니다. (전체 목록 확인하기)

아직 FormData를 사용하지 않는 경우, 이 API를 사용하면 프로그래매틱 방식으로 가상 양식을 빌드하고 window.fetch() 또는 XMLHttpRequest.send(formData)를 사용하여 먼 곳으로 전송할 수 있는 간단하고 잘 지원되는 API입니다.

몇 가지 예를 보려면 계속 읽어보세요.

전문가처럼 실제 양식 파싱

FormData는 실제 HTML 양식에서 구성하여 모든 현재 값의 스냅샷을 찍을 수 있습니다. 하지만 이전에는 객체가 완전히 불투명했습니다. 변경하지 않고 서버로 전송하는 것만 가능했습니다. 이제 사진을 찍고, 수정하고, 흔들고, 관찰하고, 축소하고, 변경하고, 마지막으로 업로드할 수 있습니다.

function sendRequest(theFormElement) {
    var formData = new FormData(theFormElement);
    formData.delete("secret_user_data"); // don't include this one!
    if (formData.has("include_favorite_color")) {
    formData.set("color", userPrefs.getColor());
    }
    // log all values like <input name="widget">
    console.info("User selected widgets", formData.getAll("widget"));

    window.fetch(url, {method: 'POST', body: formData});
}

이전 XMLHttpRequest를 통해 FormData를 전송할 수도 있습니다.

var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);

FormData 삭제하지 않기

자체 FormData를 처음부터 빌드하는 경우 필드에 많은 시간을 들였는데 재사용할 수 없다는 점에 불만을 느꼈을 수 있습니다. window.fetch() 및 XMLHttpRequest.send() 메서드 모두 FormData의 스냅샷을 찍으므로 이제 작업을 안전하게 재사용하고 수정할 수 있습니다. 다음 예를 확인하세요.

// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");

// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});

// send reshare request
formData.set("action", "reshare");  // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});