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

샘 소로구드

XHR 사용자에게 가장 친한 친구인 FormData님은 Chrome 50으로 업그레이드됩니다. FormData 객체를 검사하거나 나중에 수정할 수 있는 메서드를 추가합니다. 이제 get(), delete(), 반복 도우미(예: entries, keys 등)를 사용할 수 있습니다. (전체 목록 확인하기)

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

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

전문가처럼 실제 양식 파싱

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});