Solved

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

Posted on 2004-09-19
3
245 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Generating table dynamically is the most common issue faced by php developers.... So it seems there is a need of an article that explains the basic concept of generating tables dynamically. It just requires a basic knowledge of html and little maths…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

706 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

17 Experts available now in Live!

Get 1:1 Help Now