0

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?

user164863
  • 580
  • 1
  • 12
  • 29
  • 1
    If caching is the problem, you can avoid that just adding a random string as parameter in the img src, something like: images/avataras/ID.jpg?somerandomstring . – Babblo Nov 18 '13 at 12:24
  • Sounds like you need to reload the profile picture with AJAX – Andy Holmes Nov 18 '13 at 12:24
  • 1
    In case it is cached try something like http://www.yoursite.com/images/avatar_ID.jpg#randomstuffhere_or_datetime or http://www.yoursite.com/images/avatar_ID.jpg?randomstuffhere_or_datetime – The Marlboro Man Nov 18 '13 at 12:25

1 Answers1

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()+'" />');
A3a
  • 61
  • 3