Come implementare la barra di avanzamento del caricamento file sul Web?

Question

Vorrei visualizzare qualcosa di più significativo della gif animata mentre gli utenti caricano il file nella mia applicazione web.Che possibilità ho?

Modificare:Sto usando .Net ma non mi importa se qualcuno mi mostra una versione indipendente dalla piattaforma.

Answer 1

Ecco un paio di versioni di ciò che stai cercando per alcuni toolkit JavaScript comuni.

• Mootools - http://digitarald.de/project/fancyupload/
• Extjs - http://extjs.com/learn/Extension:UploadForm

Answer 2

Se sei interessato a come tutto questo funziona generalmente sul sito client, eccolo:

Tutte le soluzioni collegano il modulo tramite JavaScript e modificano la destinazione del modulo in un IFRAME invisibile appena creato.Quindi sono liberi di utilizzare AJAX per richiedere lo stato del file dal server.

Il trucco IFRAME è necessario perché tutti gli script in esecuzione nella finestra che sta eseguendo il caricamento si bloccheranno fino al completamento della richiesta, momento in cui il file sarà completamente caricato.

Answer 3

Caricamento file ASP.NET con Tempo reale Barra di avanzamento

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

Answer 4

Ho provato varie tecniche e ho avuto più successo SWFCarica.

Crei e interagisci con un oggetto SWFUpload utilizzando Javascript, ma utilizza un file Flash (nascosto) per la selezione dei file, il caricamento e il monitoraggio dell'avanzamento del caricamento.È possibile specificare un'ampia gamma di gestori di eventi Javascript (uploadStarted, uploadProgress, uploadError ecc.) che Flash richiamerà durante l'avanzamento del caricamento rendendolo molto flessibile.Implementa anche una coda di file, quindi funziona bene per file singoli o multipli.

Collegamenti:

• Documentazione dell'API
• Demo
• Download

Answer 5

Un buon aiuto specifico per .NET per creare barre di avanzamento può essere trovato negli articoli di MSDN Magazine di Dino Esposito dello scorso luglio e agosto:

Feedback sensibile al contesto con AJAX (luglio '07)
Annullamento delle attività del server con ASP.NET AJAX (agosto '07)

Answer 6

Viene fornito un buon esempio di come eseguire questa operazione senza utilizzare Ajax su CodeProject di Nilesh Thakkar.

Answer 7

Barra di avanzamento dell'interfaccia utente jQuery - http://jqueryui.com/demos/progressbar/