homepage Welcome to WebmasterWorld Guest from 54.234.126.92
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
Forum Library : Charter : Moderators: coopster & eelixduppy & jatar k

PHP Server Side Scripting Forum

    
need feedback for user while uploading image
immols




msg:3891868		 7:49 am on Apr 14, 2009 (gmt 0)

Hello there :-)

I coded a website in PHP that accepts images for upload. Normal stuf: click a file-type button in a form and wait. The thing is, i cannot seem to give feedback to the user. I would like to use PHP, CSS and HTML and Javascript only in this website.

I submit the form

<form name="form_2" action="" method="post" enctype="multipart/form-data">
<input type="file" name="work_image" />
</form>

And then the page reloads. The next statement is executed before reaching the html of he page (so before printing anything to the browser):

upload_image($_FILES, 'work_image');

All works well. However, uploading takes a while. I would like to show a message to the user, stating tha the file is being uploaded. There are various ways to do this, i guess. What would be the best (cleanest) solution?

I am thnking about:
1. <form name="form_2" action="upload.php".... where upload.php first echo's some HTML ('Please wait, uploading your image') and after that starts processing the imageupload and redirects to the target page after finishing
2. moving the 'upload_image($_FILES, 'work_image');' statement down untill after the <body> tag and have a div made visible/invisible that has the message in it

I must be overlooking something. Any suggestions?
Thanks a lot

 

rocknbil




msg:3892227		 5:12 pm on Apr 14, 2009 (gmt 0)

<form name="form_2" action="upload.php".... where upload.php first echo's some HTML ('Please wait, uploading your image') and after that starts processing the imageupload and redirects to the target page after finishing

This is a bit of a common problem, and the complexity to which you manage it will depend on a lot of things.

HTML is a "stateless" process. That is, you send something to the server, receive a response, the process dies. So if you immediately return with "waiting" from a server response, the file upload doesn't complete because you have killed the process with a response.

The later versions of PHP have a build in progress meter extension, I can't recall what it's called but search around PHP.net if you want to give this a stab.

There are many ways to do it, including using a forked process (fork().) The simplest way to manage this is as follows. It doesn't give you any upload "meter" but is sufficient to indicate to the end user something is happening, and when the upload is complete it does what you'd expect.

- create an animated .gif or Flash: "Uploading image . . . . " You can even use plain text without an animation.

- Put this animated object in a hidden paragraph/div:
<p id="upload-progress" style="display:none">Uploading image . . . </p>

- Add Javascript to display onSubmit: 


<form action="yourscript.php" onSubmit="displayLoading();"> 
<input type="file" name="photo"> 
<input type="submit" value="Upload"> 
</form> 
<script type="text/javascript"> 
function displayLoading() { 
 if (document.getElementById('upload-progress')) { 
  document.getElementById('upload-progress').style.display='block'; 
 } 
} 
</script>

You click, connection opens to server, browser starts sending the data. The animation displays.
When the upload completes, your "normal" response page, which should display the uploaded image/thumb, replaces the entire page.

Simple and sufficient.

immols




msg:3892698		 6:55 am on Apr 15, 2009 (gmt 0)

works like a charm! Thanks a lot :-)
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / PHP Server Side Scripting
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved