How can I display a status message while a file is uploading?

Question

Can any one give a simple method using JavaScript to display a status message while file is uploading and fade away when file is uploaded?

Answer 1

This depends on your server-side language. If you're using PHP, you need something like this:

http://martinjansen.com/2007/04/28/file-upload-progress-bars-with-php/

Answer 2

I was in a similar situation a while back and ended up using the excellent BlockUI plugin for jQuery.

Answer 3

Using Jquery plugins you can apply many effects while uploading and after uploaded.

Check out this demo links :
http://valums.com/wp-content/uploads/ajax-upload/demo-prototype.htm
http://www.uploadify.com/demo/

Jquery Example :
http://valums.com/ajax-upload/

Answer 4

  <style type="text/css">
     #loadingMessage {
        position: absolute;
        top: WHEREVER;
        left: WHEREEVER;
        z-Index: 100;
     }
  </style>

    <div id="loadingMessage" style="visibility:hidden;">This page be uploading!</div>

    <form id="yourForm"> ... </form>

    <script>
       document.getElementById("yourform").onsubmit = function() {
          document.getElementById("loadingMessage").visibilty = "visible";
          return true;
       };
    </script>

Answer 5

  <style type="text/css">
     #loadingMessage {
        position: absolute;
        top: WHEREVER;
        left: WHEREEVER;
        z-Index: 100;
     }
  </style> 


   <div id="loadingMessage" style="visibility:hidden;">This page be uploading!</div>

    <form id="yourForm"> ... </form>

    <script>
       document.getElementById("yourform").onsubmit = function() {
          document.getElementById("loadingMessage").visibilty = "visible";
          return true;
       };
    </script>