JQueury serialize function (.serialize) it creates a text string in standard URL-encoded notation. Often it is used on form to serialize the controls within it. Example:
<!------------------------ Your Form --------------------------->
<form id="myForm">
<input type='text' name='nameTxt' value='nameValue' />
<input type='checkbox' name='check' value='a' />
<input type='checkbox' name='check' value='b' checked='checked' />
<input type='checkbox' name='check' value='c' />
</form>
// JavaScript
function useSerialize(){
var str = $('#myForm').serialize();
alert(str); // print => nameTxt=nameValue&check=b
}
The serialize method puts your form fields data in a string complying to the application/x-www-form-urlencoded content type used to submit forms to servers for processing, while files are submitted in requests encoded in the multipart/form-data content type, so, serialize ignores file inputs. Please refer to the specifications of form content types here:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4
Let me quote the following from it: "The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters. The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data."
Please refer also to the description of the serialize method on the jQuery docs:
http://api.jquery.com/serialize/
Which states clearly that "Data from file select elements is not serialized."
If you want to upload files manually using Ajax, you will have to use new technologies: The File System API and XMLHttpRequest Level 2, which are supported only on modern browsers. Please refer to support tables here:
http://caniuse.com/#feat=xhr2
http://caniuse.com/#feat=fileapi
This example demonstrates how to do it:
http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob
On older browsers, you may use a plugin to relieve yourself of hacks. Here's one:
http://blueimp.github.io/jQuery-File-Upload/