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.