SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Dec 2005
    Posts
    964
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Refresh iamge after upload using ajax?!

    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:
    Code JavaScript:
    <!--
    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
    PHP Code:
    <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
    PHP Code:
    <?
    $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$image0000$modwidth$modheight$width$height) ; 

        
    imagejpeg($tn$save100) ; 
        
    chmod($save0777);
            
        
    $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...

  2. #2
    SitePoint Enthusiast TriLLi's Avatar
    Join Date
    Feb 2010
    Location
    BiH, Bugojno
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi you can do this this way:

    find image element
    Code HTML4Strict:
    <img src="profileimages/15.jpg" id="user_image">
    Code JavaScript:
    var el = document.getElementById('user_image');
    el.setAttribute('src', el.getAttribute('src') + '?m='+Math.random());

    this should probably work, i didn't test it


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •