multipart/form-data not going in this ajax header

Question

 <script type='text/javascript'>
   $(document).ready(function(){
    $('#send_message').click(function(e){

        var email = $('#email').val();   

        if(fname.length == 0){
            var error = true;
            $('#fname_error').fadeIn(500);
        }else{
            $('#fname_error').fadeOut(500);
        }

        if(error == false){
           $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });

          $.post("sub_register.php", $("#contact_form").serialize(),function(result){
               if(result == 'sent'){
                    $('#cf_submit_p').remove();

                    $('#mail_success').fadeIn(500);
                }else{
                    //show the mail failed div
                    $('#mail_fail').fadeIn(500);
                    //reenable the submit button by removing attribute disabled and change the text back to Send The Message
                    $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                }
            });
        }
    });    
});

this is the header of my form . i am using file upload in this form. every other form element data is going to my submit page, except the uploaded file name. when i am removing this script from my page and using simple form submit using php, then its sending the uploaded file name.

How can i send 'multipart/form-data' in this ajax header.

thanks in advance

@hindmost — Why? The HTTP request is being constructed using JavaScript, not the form. — Quentin, Jan 28 '14 at 08:56
jQuery `post` and `serialize` don't support file uploads. You'll need to either access XMLHttpRequest and the Files API directly or find a different library. — Quentin, Jan 28 '14 at 08:58
possible duplicate of [sending a file as multipart through xmlHttpRequest](http://stackoverflow.com/questions/9395911/sending-a-file-as-multipart-through-xmlhttprequest) — Quentin, Jan 28 '14 at 08:59
http://new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata — softsdev, Jan 28 '14 at 09:11

edtech · Answer 1 · 2014-01-28T10:01:53.863

You can't upload files via $.post. Instead, you can use Jquery Form plugin

In that way, your code will looks as:

    $("#contact_form").ajaxForm(function() { 
    if(result == 'sent'){
                $('#cf_submit_p').remove();

                $('#mail_success').fadeIn(500);
            }else{
                //show the mail failed div
                $('#mail_fail').fadeIn(500);
                $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
            }
        });

multipart/form-data not going in this ajax header

1 Answers1