Solved

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

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

813 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

13 Experts available now in Live!

Get 1:1 Help Now