Ajax not calling back when request complete

Question

I'm uploading the image via AJAX but success is not calling on complete.

I have these 2 objects exits inside a form.

<img class="b_logo" id="b_logo_img" src="images/no_image.gif"> 
<input class="file_up" id="file_logo" type="file">

The data contain the URL for the image.

$(function() {

    $("#file_logo:file").change(function (){
       var fileName = $(this).val();
       savepic();
    });

});

function savepic()
{
var file_data = $("#file_logo").prop("files")[0]; // Getting the properties of file from file field
var form_data = new FormData(); // Creating object of FormData class
form_data.append("file", file_data) // Appending parameter named file with properties of file_field to form_data
form_data.append("user_id", 123) // Adding extra parameters to form_data
$.ajax({
url: "support_file/upload_image.php",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data, // Setting the data attribute of ajax with file_data
type: 'post',
success: function (data) {
$("#b_logo_img").attr("src",data);
}
});
}

Response

Answer 1

This should work fine

1) Try using a form to get the image file name and send it to the php instead of getting it the way you are getting.

2) Always empty the style attribute of the img tag when you are dynamically changing its src

$("#file_logo").change(function()  
    { var formData = new FormData($("#form_id")[0]);



        $.ajax({
            url: "name_of_your_php_page.php",
            type: 'POST',
            data: formData,
            async: false,
            success: function (info) {
                $("#b_logo_img").attr('src',info).fadeIn();
                $("#b_logo_img").attr('style',' '); 
    },
    cache: false,
    contentType: false,
    processData: false
});
return false;

});

Answer 2

Removing the dataType: 'script' works.