image uploading to the database but not to the destination folder using PHP, jQuery and AJAX

Question

I am trying to upload an image using PHP, AJAX and jQuery. The image is uploaded perfectly without the ajax i.e using only submit_post.php but when I use AJAX it does not succeed and comes up with an "error" alert. I am surely missing something in the AJAX submit script.

Here is the script

submit.js

function submitForm(){

               $.ajax({


                      type : 'POST',

                      url  : 'submit_post.php',
                      data : $('#submit_post').serialize(),
                      dataType : 'json',

    mimeType: "multipart/form-data",

                      success : function(data){


                              console.log(data);


                              $('#btn-signup').html('<img src="ajax-loader.gif" /> &nbsp; signing up...').attr('disabled', 'disabled');

                               setTimeout(function(){

                                   if ( data.status==='success' ) {

                                       $('#errorDiv').slideDown(200, function(){
                                            $('#errorDiv').html('<div class="alert alert-info">'+data.message+'</div>');
                                            $('#errorDiv').delay(3000).slideUp(100);
                                            $("#submit_post")[0].reset();
                                            $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
                                            $('#btn-signup').removeAttr('disabled');
                                       });

                                   } else {

                                        $('#errorDiv').slideDown(200, function(){
                                             $('#errorDiv').html('<div class="alert alert-danger">'+data.message+'</div>');
                                             $('#errorDiv').delay(3000).slideUp(100);
                                             $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
                                             $('#btn-signup').removeAttr('disabled');
                                         });
                                   }

                               },3000);


                      },
                      error: function(){alert('Error!')}

               });

               return false;
           }



});

It doesn't have to do with the folder permissions because the image is uploaded fine without the AJAX.

You cannot upload files like that when you use ajax, see for example: http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — jeroen, Sep 13 '16 at 12:17
it is not the server error it is the error alert I have used in the ajax script to show when the ajax form submit is not not a success. It must be not returning valid json — chris, Sep 13 '16 at 12:22

score 0 · Accepted Answer · answered Sep 13 '16 at 12:32

submit the form using below written code and than try to upload and please check the permission of the folder where you want to upload the images

 $("#submit_post").on("submit", function(e) {
        e.preventDefault();
        $.ajax({
            url: "url.php",
            type: "POST",
            data: new FormData(this),
            dataType: "json",
            contentType: !1,
            cache: !1,
            processData: !1,
            success: function(e) {
            }
        })
    }),

image uploading to the database but not to the destination folder using PHP, jQuery and AJAX

1 Answers1