2

It seems like a simple issue but its been hour now breaking my head on this. i have a form which accepts file from user submit to the server using ajax. Problem i am facing is in $(this).serialize() which always returns an empty string. i have defined name attribute for input field. function too seems to be correct can anyone point out if i am missing something!!

There are many similar que's already on this but most answers say it needs name attribute which is already present.

Form:

<form action="/upload" name="upload_form" method="POST" id="upload-form">
    <input type="file" name="file" value=""/><br />
    <input type="submit" name="submit" value="Upload"/>
    <input type="reset" name="clear" value="Clear"/>
</form>

Script

           $(document).ready(function () {
                $('#upload-form').on('submit', function(e) {
                    e.preventDefault();
                    console.log($(this).serialize());
                    $.ajax({
                        url : $(this).attr('action'),
                        type: "POST",
                        data: $(this).serialize(),
                        success: function (data) {
                            console.log(data);
                        },
                        error: function (jXHR, textStatus, errorThrown) {
                            alert(errorThrown);
                        }
                    });
                });
            });
Pradeep
  • 243
  • 1
  • 3
  • 10

2 Answers2

2

Include enctype="multipart/form-data" when you are dealing with file upload. When using ajax, you can call and use FormData object. So it will something be like this.

var formFile = new FormData();
        formFile.append('file',$( '#id_of_fileinput' )[0].files[0] );
 $.ajax({
           url: path_to_php,
           type:"POST",
           data: formFile,
           dataType: "json",
           processData: false, //important to include when uploading file
           contentType: false, //important to include when uploading file
           beforeSend: function(){
                $('.loading').show();
                $('.masked').show();
           },
           success: function(data){
                 //do something with data
                console.log(data);
                $('.loading').hide();
                $('.masked').hide();
            }
   });
graceth
  • 178
  • 8
  • Thanks, Even though i get file details from `$('#id_of_fileinput' )[0].files[0])` on browser console but on server it comes as null.. I am using python - Flask framework at server side. Doing some custom manipulation on images. Server side works fine if i do normal form submit. Facing issues with ajax. python code to receive details - `request.form.get('file')` Any suggestion. ? – Pradeep Apr 22 '16 at 03:27
  • 1
    In ajax that process should be fine. The only difference is the processing on the server side. This post might help you about python and flask framework. http://stackoverflow.com/questions/18334717/how-to-upload-a-file-using-an-ajax-call-in-flask – graceth Apr 22 '16 at 03:35
0

Apparently,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 this for information :

http://www.bayt.com/en/specialties/q/1335/why-a-file-can-t-be-uploaded-through-jquery-serialize-function/

pritesh
  • 533
  • 4
  • 15