POST request is not formatted AJAX Jquery

Question

Look at that:

HTML

<form id="form" enctype="multipart/form-data" action="paginax.php" method="post">
<input name="nome_arquivo" type="file"/>
<input type="hidden" value="valor_name1" name="name1"/>
<input type="hidden" value="valor_name" name="name2"/>
</form>

JAVASCRIPT

$(document).ready(function(){
$("#enviar_form").click(function(){

    $.ajax({
                method:"POST",
                data: $("#form").serialize(),
                url: "paginax.php",
                contentType:"multipart/form-data; boundary=---------------------------1922310697355",
                headers:{
"Accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
"Accept-Encoding":"gzip, deflate",
"Accept-Language":"pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3",
"Content-Length":"781659",
"Content-Type":"multipart/form-data; boundary=---------------------------1922310697355",
"User-Agent":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:36.0) Gecko/20100101 Firefox/36.0"
                },
                success:function(){alert("foi!");},
                error: function(e){alert(e);}
                });

});
});

The question is, I configured in ajax the header of the request(headers), and in the Content-type of the header I placed: multipart/form-data; boundary=---------------------------1922310697355.

My expectation was that the data to be sent would be divided by what I determined in Boundary(---------------------------1922310697355).

However, when consulting the request that is made, I see it being put in this way:

name1=valor_name1&name2=valor_name

That is, in addition to not being divided as determined in Boundary, the image I selected in the form (in input[type=file]) seems not to be sent either.

I have three questions:

1° why is not sent the POST as I determined in the division?

2° why the image is not sent, since I do not see it in the data sent in the POST (unless it is available visually only by the magic var $_FILES)..

3° if I determine in headers: of $.jquery the Content-type:..., i need to configure the field/attribute Content:Type: of $.jquery of my request again?

Answer 1

why is not sent the POST as I determined in the division?

Probably because the jQuery serializes the object you pass in the attribute data for a form data format (Query String).

Maybe the serialization of jQuery is not formatting the data in the right way for them to be readable to the reader (the server).

This serialization is done internally through the method $.param() of jQuery. So when you pass the object by parameter, like this:

{x: 1, z: 2}

... It sends them in Query String format, like this:

x=1&z=2

why the image is not sent, since I do not see it in the data sent in the POST (unless it is available visually only by the magic var $_FILES)

In jQuery, you will only be able to send files via post using the object formData javascript. To do this, you must remove this automatic serialization by changing the value of the attribute data by the object formData. Remembering that the request should be POST :)

Example:

var formData = new FormData();

formData.append('key', 'value');

formData.append('image', $('#image').prop('files')[0])

$.ajax({ processData: false, cache: false, contentType: false, data: formData, type: 'post'})

if I determine on the headers: from $.jquery to Content-type:..., I need to configure the Content:Type: field/attribute of my $.jquery requisition again?

In case, as you are sending a file, the Content-Type should be deactivated as the FormData also have your own headers when the request is sent. Therefore, we disable it as {contentType: false}.

Maybe, this answer I gave here at SOPT can help you:

upload without refresh with Formdata, jquery