I have a script which allow users to chnage there profile image, and it allmost works perfect. The script is set up so when a user uploads a new picture it overrides the previous one, so if a user have an ID, lets say 15, the image would be called 15.jpg. The problem is that when an new upload is finished it still shows the old image, I think by cache, and thats no good. How do I refresh the image with ajax so when the script has done uploading the image is the new one?
The javascript upload.js:
<!--
function startUpload(){
document.getElementById('f1_userimage').style.visibility = 'hidden';
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msgSuccess">File upload succes!</span><br><br/>';
document.getElementById('f1_userimage').innerHTML = '<img src="profileimages/<?=$userid;?>.jpg">';
document.getElementById('f1_upload_form').innerHTML = result + 'Image: <input type="file" name="file" id="file" class="input_field"><br><br><input type="submit" name="new" id="new" value="Upload" class="red150btn">';
document.getElementById('f1_upload_form').style.visibility = 'visible';
document.getElementById('f1_userimage').style.visibility = 'visible';
}
else if (success == 2){
result = '<span class="msg">Image not jpg!<\\/span><br/><br/>';
document.getElementById('f1_userimage').innerHTML = '<img src="upload_user_error_150.png">';
document.getElementById('f1_upload_form').innerHTML = result + 'Image: <input type="file" name="file" id="file" class="input_field"><br><br><input type="submit" name="new" id="new" value="Upload" class="red150btn">';
document.getElementById('f1_upload_form').style.visibility = 'visible';
document.getElementById('f1_userimage').style.visibility = 'visible';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
return true;
}
//-->
index.php
<script language="javascript" src="upload.js">
<center>
<div id="uploadcontainer">
<div id="uploadcontent">
<?
$sql = "SELECT * FROM ".$prefix."_users WHERE new_userid = '$userid'";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
echo '<div id="f1_userimage">';
if(!$row['img_small']){
echo '<img src="images/no_userimg_big.png" width="150px" height="150px">';
} else {
echo '<img src="profileimages/'.$userid.'.jpg">';
}
echo '</div>';
?>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<p id="f1_upload_process">Uploading!<br><br><img src="myloader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>';
Image: <input type="file" name="file" id="file" class="input_field"><br><br>
<input type="submit" name="new" id="new" value="'._CHANGE_IMAGE.'" class="red150btn">';
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
</div>
</center>
upload.php
<?
$result = 0;
$imagename = $_FILES['file']['name'];
function findexts ($imagename){
$imagename = strtolower($imagename) ;
$exts = split("[/\\\\.]", $imagename) ;
$n = count($exts)-1;
$exts = $exts[$n];
return $exts;
}
$ext = findexts ($_FILES['file']['name']);
$ext = strtolower($ext);
if ($ext != 'jpg'){
$result = 2;
} else {
$imagename = $userid.'.'.$ext;
$source = $_FILES['file']['tmp_name'];
$target = "profileimages/".$imagename;
if(@move_uploaded_file($source, $target)){
$result = 1;
}
$imagepath = $imagename;
$save = "profileimages/" . $imagepath; //This is the new file you saving
$file = "profileimages/" . $imagepath; //This is the original file
list($width, $height) = getimagesize($file) ;
$modwidth = 640;
$diff = $width / $modwidth;
$modheight = $height / $diff;
$tn = imagecreatetruecolor($modwidth, $modheight) ;
$image = imagecreatefromjpeg($file) ;
imagecopyresampled($tn, $image, 0, 0, 0, 0, $modwidth, $modheight, $width, $height) ;
imagejpeg($tn, $save, 100) ;
chmod($save, 0777);
$sqlimage = 'profileimages/'.$userid.'.jpg';
$result = $db->sql_query("UPDATE ".$prefix."_users SET img_small='$sqlimage' WHERE new_userid='$userid'");
sleep(1);
}
?>
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>);</script>
Thanks in advance…