19

I would like display something more meaningful that animated gif while users upload file to my web application. What possibilities do I have?

Edit: I am using .Net but I don't mind if somebody shows me platform agnostic version.

Jakub Šturc
  • 35,201
  • 25
  • 90
  • 110

7 Answers7

14

If you are interested how all this generally works client-site, this is it:

All the solutions hook up the form via javascript and change the forms target to a newly created, invisible IFRAME. Then they are free to use AJAX to request some status about the file from the server.

The IFRAME trick is needed because all the scripts running in the window that is doing the upload will hang until the the request is completed at which time the file is fully uploaded.

pilif
  • 12,548
  • 5
  • 34
  • 31
  • Is IFRAME really necessary? Can someone confirm this? I am confused. – Jakub Šturc Sep 08 '08 at 14:52
  • 6
    Yes, IFRAME is needed. You can't submit file uploads via AJAX (i.e. via the Javascript XMLHTTPRequest object) and just a normal form submit would prevent you from executing additional Javascript to poll the server for upload progress. – georgebrock Sep 09 '08 at 12:00
5

Here are a couple of versions of what you're looking for for some common JavaScript toolkits.

Matt Sheppard
  • 116,545
  • 46
  • 111
  • 131
3

ASP.NET File Upload with Real-Time Progress Bar

http://mattberseth.com/blog/2008/07/aspnet_file_upload_with_realti_1.html

NakedBrunch
  • 48,713
  • 13
  • 73
  • 98
2

I've tried various techniques and had most success with SWFUpload.

You create and interact with an SWFUpload object using Javascript, but uses a (hidden) Flash file for file selection, uploading and upload progress monitoring. You can specify a wide range of Javascript event handlers (uploadStarted, uploadProgress, uploadError etc.) that the Flash will call during the upload progress making it very flexible. It also implements a file queue, so it works well for single or multiple files.

Links:

georgebrock
  • 28,393
  • 13
  • 77
  • 72
1

Some good .NET-specific help for doing progress bars can be found in Dino Esposito's MSDN Magazine articles from last July and August:

Context-Sensitive Feedback with AJAX (July '07)
Canceling Server Tasks with ASP.NET AJAX (August '07)

Jason Bunting
  • 58,249
  • 14
  • 102
  • 93
0

A good example of doing this without using Ajax is given at CodeProject by Nilesh Thakkar.

Niyaz
  • 53,943
  • 55
  • 151
  • 182
  • 1
    It's a dummy progress bar. Does not show %percent uploaded. Might as well use the "uploading..." message as an overlay. – krishna Feb 18 '10 at 07:22
-3

jQuery UI Progressbar - http://jqueryui.com/demos/progressbar/