Welcome to WebmasterWorld Guest from 54.166.112.74

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

need feedback for user while uploading image

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

5+ Year Member



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

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<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.

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

5+ Year Member



works like a charm! Thanks a lot :-)