Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

Why a file can't be uploaded through jquery serialize function?

if can upload then how???... i use .ajaxSubmit function to upload file

user-image
Question added by Faizan Ahmad , Software Engineer , cardekho.com
Date Posted: 2013/04/13
Murad Bin Makhashin
by Murad Bin Makhashin , Software Developer , Dar Al Tamleek

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 }

Ashraf Sabry
by Ashraf Sabry , Freelancer developer , N/A

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/

More Questions Like This