Barra di avanzamento per i caricamenti di file Iframe?

Question

Attualmente sto lavorando a un'applicazione web che consente all'utente di caricare file senza ricaricare la pagina. Finora, l'utente può cercare i file, e quando si cambia l'ingresso, i file vengono caricati utilizzando la seguente tecnica iframe:

HTML:

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe> 
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
    <input type="file" name="files[]" multiple id="old-file-picker" > 
</form> 

JavaScript/jQuery:

$('#old-file-picker').change(function() { 
    // Submit the form 
    $('#old-style-upload').submit(); 
}); 
$('iframe[name=iframe-target]').load(function() { 
    // Code that deals with the newly uploaded files 
    $('#old-style-upload').get(0).reset(); 
}); 

Questo funziona benissimo, tuttavia, l'utente non ha modo di sapere che i file vengono caricati, né quanto tempo ci vorrà. C'è un modo per fare una barra di avanzamento che mostra lo stato di avanzamento dei file caricati?

L'unica cosa che posso pensare è mostrare un loading gif.

Answer 1

Per fare ciò, se si utilizza un modulo di posta multiparte/modulo dati regolare, è necessario disporre di codice sul lato server; uno che può avanzare feed-back al JavaScript in esecuzione nei browser dei clienti. Dai uno sguardo allo at this previously asked question. In alternativa potresti usare Flash (ma probabilmente non vuoi) o HTML 5. Puoi dare un'occhiata a questa domanda e this question concerning XMLHTTPRequests.