Upload file progress bar

marcomg · 9 Set 2012

Ho cercato tantissimo su google, ma non ho trovato nulla al riguardo.
Mi servirebbe una progress bar che indichi lo stato di upload di un file, ma non deve essere fatta con ajax, ma normalmente tramite un form.
Un grazie a chi mi aiuterà o almeno ci proverà.

alessandro1997 · 9 Set 2012

Non so se sia possibile farlo senza AJAX: in qualche modo il client deve comunicare col server per ottenere lo stato dell'upload. Perché non va bene AJAX?

marcomg · 9 Set 2012

Il problema è che ajax non lo conosco e lo script è già pronto. Se il client ha javascript disabilitato si può fare tramite form normalmente?

alessandro1997 · 9 Set 2012

Non sono un esperto, ma non credo.

Comunque vale la pena di provare UploadiFive (scritto in HTML5, che costa solo 5 dollari): http://www.uploadify.com/. Fa tutto da solo, tu devi solo configurarlo, e immagino che lo script per l'upload lato-server non sia molto diverso dal tuo attuale.

marcomg · 9 Set 2012

Ho letto la licenza e non fa al caso mio. A pagamento ci posso stare, ma deve avere una licenza libera. Come la gpl o la apache.

borgo italia · 9 Set 2012

ciao
dai un occhio qui
http://www.w3schools.com/html5/tag_progress.asp

marcomg · 9 Set 2012

Ho visto, ma come farla aumentare?
Io di javascript ne so 0. Potrei farla aumentare gradualmente, ma non so se se il javascript può accedere al file che si sta caricando. È vero che il server sa quanti file ha ricevuto e con ajax ne vengo a conoscenza, ma anche il client sa quanti file ha inviato.

marcomg · 9 Set 2012

Ad esempio questo la fa aumentare a tempo

HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<p>
  <progress id="bar" value="0" max="100"> <span id="fallback">
    <!-- Your fallback goes here -->
    </span> </progress>
</p>
<script>
window.onload = function() {
 
    var bar = document.getElementById("bar"),
    fallback = document.getElementById("fallback"),
    loaded = 0;
 
    var load = function() {
        loaded += 10;
        bar.value = loaded;
 
        /* The below will be visible if the progress tag is not supported */
        $(fallback).empty().append("HTML5 progress tag not supported: " + loaded + "% loaded");
 
        if(loaded == 100) {
            clearInterval(dummyLoad);
        }
    };
 
    var dummyLoad = setInterval(function() {
        load();
    } ,1000);
}
</script>
</body>
</html>

Se si sostituisce al tempo i byte inviati allora problema risolto. Si può fare?

marcomg · 14 Mar 2013

Allora non esiste alcun sistema mediante javascript che controlli quanto è pesante il file uplodato e quanto ne è stato uplodato?

Bruschetta95 · 11 Mar 2014

Dimmi che hai risolto... sono giorni che cerco ma non trovo niente!

www.wesharegame.com

flameseeker · 11 Mar 2014

Ho scritto una libreria che utilizza ajax per fare gli upload di file in modo asincrono.
Così facendo sfrutto una serie di API introdotte con XmlHttpRequest 2 che consentono l'implementazione di cose come una progress bar.

Questo metodo non regge files molto pesanti, se prevedete upload inferiori ai 20Mb va benissimo, altrimenti vi conviene puntare su flash.

Cerca

Cerca

Upload file progress bar

marcomg

Utente Attivo

alessandro1997

Utente Attivo

marcomg

Utente Attivo

alessandro1997

Utente Attivo

marcomg

Utente Attivo

borgo italia

Super Moderatore

marcomg

Utente Attivo

marcomg

Utente Attivo

marcomg

Utente Attivo

Bruschetta95

Utente Attivo

flameseeker

Utente Attivo

Discussioni simili