Display New Images First Without Page Reload?

PHP
1

Hi,

I have two PHP scripts. The first displays the images uploaded by a user. The second script enables a user to upload new images. The problem is as the first script displays the images it does not update until the page is refreshed after someone adds a new image. If I use this script second then it changes the image as soon as a new image is added.

Does anyone know how I can make the images appear first and allow them to be updated as soon as the image is changed.

    <div class="content-container1">
        <div class="content-container2">
    <div class="section-navigation">
            </div>
                        <div class="content">
                        <div class="container">
                        
                                       <div class="imageuploadheader">
Your Current Images
</div>
             <div class="imageuploadsegment">
    <?php
$query = "SELECT * FROM users WHERE id = " . intval($_SESSION['userID']) . " LIMIT 1";
if ($result = mysql_query($query)) {
 
                $row = mysql_fetch_array($result);
        {
                ?>             
<ul>     
                         <div class="imageuploadboardimages1">
  <img src="/test/images/<?php echo (!empty($row['logo'])) ? $row['logo'] : ''; ?>" alt="website.com - Your Profile Image"/>
                             </div>
                            
                        <div class="imageuploadboardimages2">
                          <img src="/test/images/<?php echo $row['logo1']; ?>" alt="website.com - Your Profile Image"/>
                             </div>
                             
                        <div class="imageuploadboardimages2">
                          <img src="/test/images/<?php echo $row['logo2']; ?>" alt="website.com - Your Profile Image"/>
                             </div>
                             
                  <div class="imageuploadboardimages2">
                  <img src="/test/images/<?php echo $row['logo3']; ?>" alt="website.com - Your Profile Image"/>
                             </div>                                 
                             
            
                            <?php
                                    }
} 
                            
                                ?>


  
</ul>
 
</form>
   </div>
   
               <div class="imageuploadheader">
Upload New Images
</div>
    
    <?php
$query = "SELECT * FROM users WHERE id = " . intval($_SESSION['userID']) . " LIMIT 1";
if ($result = mysql_query($query)) {
 
                $row = mysql_fetch_array($result);
        {
             
$myID = intval($_SESSION['userID']);
             
$myID = $row['id'];
}
}
?>
<?php


//LOGO PHP
// Process the form if it is submitted
if ($_FILES['uploadLogo']['tmp_name'] != "") {
// Run error handling on the file
// Set Max file size limit to somewhere around 2mb
$maxfilesize = 3145728; //size in bytes
// Check file size, if too large exit and tell them why
if($_FILES['uploadLogo']['size'] > $maxfilesize ) { 
    echo "<br /><br />Your logo image was too large. Must be 3Mb or less, please<br /><br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadLogo']['tmp_name']); 
        exit();
    // Check file extension to see if it is .jpg, if not exit and tell them why
} else if (!preg_match("/\\.(gif|png|jpg|jpeg)$/i", $_FILES['uploadLogo']['name'] ) ) {
        echo "<br /><br />Your image was not .jpg, please<br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadLogo']['tmp_name']);
        exit();
        // If no errors on the file process it and upload to server 
} else { 
        // Set the direntory for where to upload it, use the member id to hit their folder
        // Upload the file
        /*if(isset($_GET['id'])){
        if (!is_dir('memberFiles/'.$id.'/images/')) { //if memberFiles folder does not exist
             mkdir('memberFiles/'.$id.'/images/'); //make the folder 
        }*/
        if (!is_dir('images/')) { //if memberFiles folder does not exist
             mkdir('images/'); //make the folder 
        }
            $target_path = 'images/'; //set targetpath
}
        //adjust target path to create new file name which include $id and current date and original filename
        $ref = "-". gmdate('jmyhis') ."-". basename( $_FILES['uploadLogo']['name']);
        $target_path .= $ref;
        $filename = basename($_FILES['uploadLogo']['name']); 
        $date =    gmdate('j-m-y h:i:s');
        
if(move_uploaded_file($_FILES['uploadLogo']['tmp_name'], $target_path)) {
        mysql_query("UPDATE users SET logo='$ref' WHERE id='$myID'");
        echo "Your image ".$filename." has been uploaded";
} else {
        echo "There was an error uploading the logo file, please try again!";
}
}

//IMAGE ONE
// Process the form if it is submitted
if ($_FILES['uploadImageOne']['tmp_name'] != "") {
// Run error handling on the file
// Set Max file size limit to somewhere around 2mb
$maxfilesize = 3145728; //size in bytes
// Check file size, if too large exit and tell them why
if($_FILES['uploadImageOne']['size'] > $maxfilesize ) { 
    echo "<br /><br />Your logo image was too large. Must be 3Mb or less, please<br /><br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadImageOne']['tmp_name']); 
        exit();
    // Check file extension to see if it is .jpg, if not exit and tell them why
} else if (!preg_match("/\\.(gif|png|jpg|jpeg)$/i", $_FILES['uploadImageOne']['name'] ) ) {
        echo "<br /><br />Your image was not .jpg, please<br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadImageOne']['tmp_name']);
        exit();
        // If no errors on the file process it and upload to server 
} else { 
        // Set the direntory for where to upload it, use the member id to hit their folder
        // Upload the file
        /*if(isset($_GET['id'])){
        if (!is_dir('memberFiles/'.$id.'/images/')) { //if memberFiles folder does not exist
             mkdir('memberFiles/'.$id.'/images/'); //make the folder 
        }*/
        if (!is_dir('images/')) { //if memberFiles folder does not exist
             mkdir('images/'); //make the folder 
        }
            $target_path = 'images/'; //set targetpath
}
        //adjust target path to create new file name which include $id and current date and original filename
        $ref = "-". gmdate('jmyhis') ."-". basename( $_FILES['uploadImageOne']['name']);
        $target_path .= $ref;
        $filename = basename($_FILES['uploadImageOne']['name']); 
        $date =    gmdate('j-m-y h:i:s');
        
if(move_uploaded_file($_FILES['uploadImageOne']['tmp_name'], $target_path)) {
        mysql_query("UPDATE users SET logo1='$ref' WHERE id='$myID'");
        echo "Your image ".$filename." has been uploaded";
} else {
        echo "There was an error uploading the logo file, please try again!";
}
}

//IMAGE TW0
// Process the form if it is submitted
if ($_FILES['uploadImageTwo']['tmp_name'] != "") {
// Run error handling on the file
// Set Max file size limit to somewhere around 2mb
$maxfilesize = 3145728; //size in bytes
// Check file size, if too large exit and tell them why
if($_FILES['uploadImageTwo']['size'] > $maxfilesize ) { 
    echo "<br /><br />Your logo image was too large. Must be 3Mb or less, please<br /><br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadImageTwo']['tmp_name']); 
        exit();
    // Check file extension to see if it is .jpg, if not exit and tell them why
} else if (!preg_match("/\\.(gif|png|jpg|jpeg)$/i", $_FILES['uploadImageTwo']['name'] ) ) {
        echo "<br /><br />Your image was not .jpg, please<br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadImageTwo']['tmp_name']);
        exit();
        // If no errors on the file process it and upload to server 
} else { 
        // Set the direntory for where to upload it, use the member id to hit their folder
        // Upload the file
        /*if(isset($_GET['id'])){
        if (!is_dir('memberFiles/'.$id.'/images/')) { //if memberFiles folder does not exist
             mkdir('memberFiles/'.$id.'/images/'); //make the folder 
        }*/
        if (!is_dir('images/')) { //if memberFiles folder does not exist
             mkdir('images/'); //make the folder 
        }
            $target_path = 'images/'; //set targetpath
}
        //adjust target path to create new file name which include $id and current date and original filename
        $ref = "-". gmdate('jmyhis') ."-". basename( $_FILES['uploadImageTwo']['name']);
        $target_path .= $ref;
        $filename = basename($_FILES['uploadImageTwo']['name']); 
        $date =    gmdate('j-m-y h:i:s');
        
if(move_uploaded_file($_FILES['uploadImageTwo']['tmp_name'], $target_path)) {
        mysql_query("UPDATE users SET logo2='$ref' WHERE id='$myID'");
        echo "Your image ".$filename." has been uploaded";
} else {
        echo "There was an error uploading the logo file, please try again!";
}
}
//IMAGE THREE
// Process the form if it is submitted
if ($_FILES['uploadImageThree']['tmp_name'] != "") {
// Run error handling on the file
// Set Max file size limit to somewhere around 2mb
$maxfilesize = 3145728; //size in bytes
// Check file size, if too large exit and tell them why
if($_FILES['uploadImageThree']['size'] > $maxfilesize ) { 
    echo "<br /><br />Your logo image was too large. Must be 3Mb or less, please<br /><br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadImageThree']['tmp_name']); 
        exit();
    // Check file extension to see if it is .jpg, if not exit and tell them why
} else if (!preg_match("/\\.(gif|png|jpg|jpeg)$/i", $_FILES['uploadImageThree']['name'] ) ) {
        echo "<br /><br />Your image was not .jpg, please<br />
        <a href=\\"gallery_upload.php\\">click here</a> to try again";
        unlink($_FILES['uploadImageThree']['tmp_name']);
        exit();
        // If no errors on the file process it and upload to server 
} else { 
        // Set the direntory for where to upload it, use the member id to hit their folder
        // Upload the file
        /*if(isset($_GET['id'])){
        if (!is_dir('memberFiles/'.$id.'/images/')) { //if memberFiles folder does not exist
             mkdir('memberFiles/'.$id.'/images/'); //make the folder 
        }*/
        if (!is_dir('images/')) { //if memberFiles folder does not exist
             mkdir('images/'); //make the folder 
        }
            $target_path = 'images/'; //set targetpath
}
        //adjust target path to create new file name which include $id and current date and original filename
        $ref = "-". gmdate('jmyhis') ."-". basename( $_FILES['uploadImageThree']['name']);
        $target_path .= $ref;
        $filename = basename($_FILES['uploadImageThree']['name']); 
        $date =    gmdate('j-m-y h:i:s');
        
if(move_uploaded_file($_FILES['uploadImageThree']['tmp_name'], $target_path)) {
        mysql_query("UPDATE users SET logo3='$ref' WHERE id='$myID'");
        echo "Your image ".$filename." has been uploaded";
} else {
        echo "There was an error uploading the logo file, please try again!";
}

}


?>



        



            <ul>
<div class="imageuploadcell">
<div id="imageuploadcell">
<form action="" method="post" enctype="multipart/form-data" name="form" id="form">

<div class="imageuploadboxtop">
<div class="imageuploadboxlogo">
<div class="imageuploadleft">Logo: </div><div class="imageuploadright"><input name="uploadLogo" class="field" type="file" /></div>
</div>
</div>

<div class="imageuploadboxbottom">
<div class="imageuploadbox">
<div class="imageuploadleft">Image 1: </div><div class="imageuploadright"><input class="field" name="uploadImageOne" type="file" /></div>
</div>
<div class="imageuploadbox">
<div class="imageuploadleft">Image 2: </div><div class="imageuploadright"><input class="field"  name="uploadImageTwo" type="file" /></div>
</div>
<div class="imageuploadbox">
<div class="imageuploadleft">Image 3: </div><div class="imageuploadright"><input class="field" name="uploadImageThree" type="file" /></div>
</div>
</div>

            <div class="imageuploadbuttonbox">
            <div class="user-area">
             <input type="submit" name="Submit" value="Upload" />
                 </div>
                </div>
            </ul>
            </form>
            </div>
            </div>
2

This would be governed by AJAX.

Essentially, what you do is decide on a polling interval, and send a request via AJAX to your PHP.

3

Be aware that the mysql_* extension is deprecated as of the current version of PHP and will very likely be removed from the next version of PHP. You should be migrating over to using either the mysqli_* extension or to PDO

4

This might help
http://stackoverflow.com/questions/14136291/how-to-update-page-after-database-insert-or-update-in-php-or-ajax