Solved

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

Posted on 2004-09-19
3
264 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

733 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