PHP Reload parent page from iframe

drummer392 · 11-27-2009, 12:25 PM

Hello there!

I have an iframe that has my image uploader. I would like for the parent page to reload after the image has uploaded. How do I do so?

Here is my code, as you can see I already have echo's at the bottom. I would like to get rid of those and just replace it with the reload function is what I am thinking:

PHP Code:


			
        if(isset($_POST['submit'])){

          if (isset ($_FILES['new_image'])){

              $imagename = $_FILES['new_image']['name'];

              $source = $_FILES['new_image']['tmp_name'];

              $timer = time();

              $time = $timer.".jpg";

              $target = "images/upload_pic/".$time;

              move_uploaded_file($source, $target);

 

              $imagepath = $time;

              $save = "images/upload_pic/" . $imagepath; //This is the new file you saving

              $file = "images/upload_pic/" . $imagepath; //This is the original file

 

              list($width, $height) = getimagesize($file) ; 

 

              $modwidth = 280; 

 

              $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) ; 

              

                   $query = "insert into images

                         (imagepath)values 

                         ('$time')";

                         

                     $result = mysql_query($query, $handle);



              

            echo "<div id='uploadblock'><h2 class='Htext'>UPLOADED PHOTO</h2>";

            echo "<p><img src='images/upload_pic/".$time."'><p>";

            echo "<span class='Hlinks'><a href='index.php' target='_parent'>ACCEPT PHOTO</a></span></div>"; 

          }

        }

icio · 11-27-2009, 12:52 PM

Send the following javascript to the iframe upon image upload completion:

HTML Code:

<html>
    <head>
        <script type="text/javascript">
        
            window.onload = function()
            {
                // Reload the parent window
                window.top.location.href = window.top.location.href;
            }
            
        </script>
    </head>
</html>

Hope that helps

drummer392 · 11-28-2009, 03:23 AM

I kept seeing this code in many examples. I still am not understanding correctly.

How do I call this after the PHP has uploaded the image. I know how to do it before it uploads the image, but not after.

icio · 11-28-2009, 06:01 AM

Well it's a simple result of the order in which data is requested/sent from/to the server by the client.

First of all you have your main web page which contains instruction to the user to upload an image and an iframe element. Within this iframe element is a web page which contains a form with a file selection input for an image.

The iframe's web page might look something like this:

HTML Code:

<html>
    <body>
        <form method="post" action="upload.php">
            <input type="file" name="image" />
        </form>
    </body>
</html>

The user will select an image in the file selection input of the iframe of the main web page (yeah?) and submit the form inside the iframe. This begins a request to the server for upload.php with the selected file attached in $_FILE['image'].

The addition of the selected file in the request is the only difference between the request to the server in this case and the request to the server in any other case. So a response is still sent from the server and still displayed in the iframe.

When the server receives the request (made from within the iframe) it will take the uploaded image and do with it what it will. We then want it to return content based on the success of the operation.

So, at the end of our upload.php script, we can simply add something like:

PHP Code:


			
echo "Upload successful.";

When the server processes this pat of the upload.php script, 'Upload successful.' will be added to the output buffer and sent back to the client. When the client receives this data it will display it as a regular piece of text.

What we have done here is create a main web page in which there is an iframe that can upload an image and display the result without changing the state of the main web page. We want to do something slightly different, though. We want the finishing of the upload to refresh the main web page.

In the order of events in which this occurs (based on the above) we can do this at any time after the script has processed the command to move the image into a more permanent location. There is only one time at which we can do it, however, and that is when the response is received from the server by the client (within the iframe). To do this we can simply output a small HTML page with some client-side scripts (which will automatically execute) sent to the browser at the end of upload.php.

In this case, the script to refresh the main web page is such that our output requires the following HTML to be sent to the browser:

HTML Code:

<html>
    <head>
        <script type="text/javascript">
        
            // Reload the parent window
            window.top.location.href = window.top.location.href;
            
        </script>
    </head>
</html>

(which doesn't actually require the window.onload event function as I had before).

Does that make sense? Hope it helps

drummer392 · 11-28-2009, 02:36 PM

I guess I am just not understanding how to call the function. I am used to doing the <body onLoad> kind of stuff.

icio · 11-28-2009, 02:39 PM

Quote:

Originally Posted by drummer392

I guess I am just not understanding how to call the function. I am used to doing the <body onLoad> kind of stuff.

It's the same principle, you are just setting the handler in JavaScript.

Anything that you include in-between <script> tags is run automatically. You needn't even put the code inside a function (as I have done in the second example.)

You might want to do some research into how JavaScript actually runs on a page. You seem to be missing a rather critical portion of your knowledge in that respect.

drummer392 · 11-28-2009, 02:42 PM

sweet man. I am willing to learn anything.

icio · 11-28-2009, 02:47 PM

Good Luck