Solved

"please wait as files are uploaded" page - after form submission

Posted on 2004-09-19
3
250 Views
Last Modified: 2008-02-01
I have a form page where a user selects files from there computer (mp3's & gifs) to upload  to the folders on the server. My form page works fine and so does the php page that handles it...I just want an intermediate page has an animated gif telling the user to be patient as the files are uploading, and then closes automatically (or redirects) when files are uploaded.

I have tried to place the annimated gif in the php page that handles the form which doesn't work...it doesn't get to the image until all the files are uploaded.

I have tried to use javascript to pop up a window with the annimated gif, and this works but I can't get the window to close automatically when the files are uploaded. I use php, mysql and a little javascript.

Is there simpler & or better way to approch this problem?
0
Comment
Question by:dblacker
3 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 150 total points
ID: 12098098
Hi dblacker,

Frames. Have a top frame with the image and a bottom frame without the image, and you can make code to collapse the top frame after the bottom frame is done uploading.

To make the frame collapse, you'd probably want to echo some Javascript after all the uploading PHP:

echo("<script language='javascript'>parent.document.body.rows='0,*';</script>");

Regards,
Zyloch
0
 
LVL 49

Assisted Solution

by:Roonaan
Roonaan earned 175 total points
ID: 12100303
Ah. what you could do is adding a hidden div and set it as the forms target. You then could show a hidden div containing some graphical entertainement for the submitter to enjoy his stay.

<html>
  <form target="submitframe" onSubmit="document.getElementById('uploadentertainment').style.display='';">
    <input type="submit" />
  </form>
  <div id="uploadentertainment" style="display:none;position:absolute;left:50%;top:50%;width:300px;height:300px;margin-left:-150px;margin-top:-150px;background-color:#ccc;border:outset 1px #999;">Some graphic</div>
  <iframe style="position:absolute;right:105%;" id="submitframe" name="submitframe"></iframe>
</html>

then have the uploader.php file export something like below to refresh the top screen.

<script>
parent.top.location="succesfullupload.html"
</script>

regards

-r-
0
 
LVL 7

Assisted Solution

by:jdpipe
jdpipe earned 175 total points
ID: 12101603
Hi dblacker,

>I have tried to use javascript to pop up a window with the annimated gif, and this works but I can't get the window to close automatically when the files are uploaded. I use php, mysql and a little javascript.

I like that idea, I've used it myself. Here's some of my code, tested and ok, although I've simplified it here for your purposes. Hope it helps.

The idea would be to change 'Your upload in progress' to a GIF (you might need to pre-load the image though in order to assure that it shows straight away)

Note the 'uploadcomplete' function which closes the popup only if no errors came from the ImageUploadSaverGizmo object.

--------------------
<script>
var us;
function pleasewait(){
      us=window.open(null,"width=...",'uploadstatus');
      us.window.document.write('<h3>Please wait</h3><p>Your upload is in progress...</p>');
}

function uploadcomplete(){
      us.close();
      self.close();
}
</script>

<form name=f enctype="multipart/form-data" action="upload.php" method=post onsubmit="pleasewait()" target="uploadstatus">

<input type=hidden name="fieldname" value="<?php echo htmlspecialchars($fieldname) ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="500000">

<input type=file size=26 name="<?php echo htmlspecialchars($fieldname) ?>">

<input type=submit value="upload">
<input type=button value="cancel" onclick="self.close()">

</form>

---------------------


upload.php (action for prev form)
---------------------
print("<h3>Saving your image upload</h3>");

$IU=new ImageUploadSaverGizmo();

if($IU->upload()){
      
      print("<h1>Image uploaded OK</h1>");

      print(
            '<script>opener.uploadcomplete();
            </script>'
      );
}



0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Consider the following scenario: You are working on a website and make something great - something that lets the server work with information submitted by your users. This could be anything, from a simple guestbook to a e-Money solution. But what…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

947 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now