FormData（） - JQUERY

Question

Until i needed to upload a file throw AJAX, i never knew there was a method like "FormData()" that POST all values of the FORM and some more.

I tested and worked perfect for file upload, but i could also send the other POST DATA, and this become even better.

Can i always use this for all my forms throw AJAX even if i don't have a file to upload? Or there is a downsizing of doing this other the upload the file?

In terms of performance, it's better to get the value of the input and send as data, or can i just use this to simplify?

The only information i could find about this, was for file upload, and not general use of this method.

Code Example:

<form id="theForm">
<<input id="test" type="text" name="test" placeholder="test" required="">
<input id="uploadFile" type="file" name="uploadFile" placeholder="uploadFile" required="">
<input id="submitFile" type="submit">
</form> 

$("#submitFile").on("click",function(event){

    event.preventDefault();

    var formData = new FormData($('#theForm')[0]);

    $.ajax({

            type: "POST",
            url: "inc/upload.php",
            data: formData,
            contentType: false,
            processData: false,
           beforeSend: function() {

               //Do Something 
         },

        })
        .done(function()
        {

        //Do Something 


        });


});

Thank you, Kind Regards!

Answer 1

Yes, you can use FormData() for any form. The only downside is that it's a more verbose format. It uses the multipart/form-data encoding rather than application/x-www-form-urlencoded. Instead of the terse syntax:

name1=value1&name2=value2&...

the form parameters will be sent as something like:

--Delimiter
Content-Disposition: form-data; name="name1"

value1
--Delimiter
Content-Disposition: form-data; name="name2"

value2
--Delimiter
...

Where Delimiter is a long, random string.

jQuery has a method $("#theForm").serialize() that will return the URL-encoded string. This can be used for any form that doesn't contain a file input.