javascript - How to manually create multipart/form-data

Question

We can use .formData() of Body mixin to return a FormData representation of data at Chromium (Chrome) 60+ and Firefox 39+

Relevant specifications:

• 7.2 The Multipart Content-Type
• Returning Values from Forms: multipart/form-data

Errata

• Clarification of Body package data algorithm with bytes, FormData and multipart/form-data MIME type #392
• Documenting de-facto handling of multipart/form-data form field file uploads #3040

Related

• Multipart HTTP response
• How to upload files in Web Workers when FormData is not defined

How to manually create multipart/form-data using JavaScript at client and at server to serve the multipart/form-data as a response?

Answer 1

You can create multipart/form-data manually with XMLHttpRequest like this example.

function multiPost(method, url, formHash){
    var boundary = "nVenJ7H4puv"
    var body = ""
    for(var key in formHash){
        body += "--" + boundary
             + "
Content-Disposition: form-data; name=" + formHash[key].name
             + "
Content-type: " + formHash[key].type
             + "

" + formHash[key].value + "
"
    }
    body += "--" + boundary + "--
"

    var xml = new XMLHttpRequest();
    xml.open(method, url)
    xml.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary)
    xml.setRequestHeader("Content-Length", body.length)
    xml.send(body)
}