Change image without reload using php and ajax - php

Question

I am trying to write the code to let users upload their profile picture using php. I want the image to be updated without reloading the page. I have tried using ajax to do this.
My ajax code is:
function f()
{
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
x=document.getElementById("img"); //Find the element
x.innerHTML=ajaxRequest.responseText; //Change the content
}
}
ajaxRequest.open("POST", "Uploadimage.php", true);
ajaxRequest.send();
}
Uploadimage.php is the file in which uploads the image and moves it into a folder.The $_FILES has the details of the file(filename,type etc...).
The above code is not working i.e., the image is not getting updated.Please help me how to correct this.
Thank you.

Answer 1

Personally I would only return the new url name of the profile pic and change the src of the profile pic upon success. Such as:
x = document.getElementById('img'); // If this is the <img> tag
x.src = ajaxRequest.responseText;
Note that the url name of the new pic will need a new url, or else I don't think any browser will try to reload the pic, regardless of caching rules set by the server.