2011-12-12 20 views
5

Obecnie pracuję nad aplikacją internetową, która umożliwia użytkownikowi przesyłanie plików bez ponownego ładowania strony. Do tej pory, użytkownik może przeglądać pliki, a gdy wejście zostanie zmieniona, pliki są przesyłane za pomocą następującej techniki iframe:Pasek postępu przesyłania plików 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(); 
}); 

Działa to świetnie, jednak użytkownik nie może wiedzieć, że pliki są przesyłane, ani jak długo to potrwa. Czy jest jakiś sposób utworzenia paska postępu, który wyświetla postęp przesyłania plików?

Jedyne, co mogę wymyślić, to pokazać loading gif.

Odpowiedz

2

Aby to zrobić, jeśli używasz zwykłego formularza wieloczęściowego/formularza danych, musisz mieć kod po stronie serwera; taki, który może przekazywać postępy do JavaScriptu działającego w przeglądarkach klientów. Spójrz na at this previously asked question. Alternatywnie możesz użyć Flasha (ale prawdopodobnie nie chcesz) lub HTML 5. Możesz rzucić okiem na to pytanie i this question concerning XMLHTTPRequests.