Update user profile picture after upload

Question

I'm using uploadifive to upload picture at user profile page. User opens up the profile page with a photo and upload button. Once user uploads the picture it gets resized and moved to an avatars folders. The pictures are stored as user_id.jpg. If user refreshes the page the picture gets updated. I would like to get that picture updated without a page refresh. Uploadifive has OnUploadComlete function and I thought I will just use that to post new picture but that doesn't work either it gets cached or some other reason.

Here is some code:

<script>
    $('#file_profile').uploadifive {
        ...
        onUploadComplete : function () {
            $('#uphoto').html('<img src="images/avatars/'+<?=$_user['id']?>+'.jpg" />');
        }
    });
</script>


<?php
    <div id="uphoto"><img src="images/avatars/'+<?=$_user['id']?>+'.jpg" /></div>
?>

Is there any way to go about this?

Answer 1

Just add some random number as parameter to your link to reload image. Browsers will load it again if there are not the same link.

$('#uphoto').html('<img src="images/avatars/'+<?=$_user['id']?>+'.jpg?'+Math.random()+'" />');