Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 291
  • Last Modified:

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

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
dblacker
Asked:
dblacker
3 Solutions
 
ZylochCommented:
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
 
RoonaanCommented:
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
 
jdpipeCommented:
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now