chris chris - 2 months ago 11
Ajax Question

image uploading to the database but not to the destination folder using php jquery ajax

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. Can someone please help me with this. Thanks in advance.

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.

Answer

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) {
            }
        })
    }),