Loading bar
Hallo iedereen,
gebruikers kunnen op mijn site documenten uploaden. Op een pagina staat dus een form met enkele fields zoals Naam, Categorie etc.. en dan als laatste een file uploader. Als ze vervolgens de form submitten wordt de file geüpload en wordt alles netjes opgeslagen op de server en in de database.
Echter mogen ze tot 10mb uploaden maar dit neemt natuurlijk enige tijd in beslag. Om te voorkomen dat ze denken dat ze niet geklikt hebben of de server niet reageert, omdat de pagina lijkt alsof ze niets doet terwijl ze eigenlijk het bestand aan het uploaden is),wil ik graag dat er een soort laadbalk staat.
In google chrome heb je links onder het aantal % van het bestand dat is geüpload, nu wil ik dit graag in het groot hebben. Enig idee hoe ik hieraan begin?
Alvast bedankt
gebruikers kunnen op mijn site documenten uploaden. Op een pagina staat dus een form met enkele fields zoals Naam, Categorie etc.. en dan als laatste een file uploader. Als ze vervolgens de form submitten wordt de file geüpload en wordt alles netjes opgeslagen op de server en in de database.
Echter mogen ze tot 10mb uploaden maar dit neemt natuurlijk enige tijd in beslag. Om te voorkomen dat ze denken dat ze niet geklikt hebben of de server niet reageert, omdat de pagina lijkt alsof ze niets doet terwijl ze eigenlijk het bestand aan het uploaden is),wil ik graag dat er een soort laadbalk staat.
In google chrome heb je links onder het aantal % van het bestand dat is geüpload, nu wil ik dit graag in het groot hebben. Enig idee hoe ik hieraan begin?
Alvast bedankt
Gewijzigd op 16/01/2013 16:43:45 door Sam H
Er bestaan wel zo'n progress bars. Ze lijken zelfs vrij goed te werken.
Kijk hier eens: http://www.johnboy.com/php-upload-progress-bar/
Echt evident is het echter niet.
1 van de grote problemen is de manier waarop php werkt.
Php begint pas te werken wanneer het volledige verzoek is aangekomen.
Dus, bij het uploaden: pas wanneer het bestand volledig op de server is toegekomen, begint php het script uit te voeren.
Je kan dus niet aan php vragen om tijdelijke boodschappen te sturen.
Kijk hier eens: http://www.johnboy.com/php-upload-progress-bar/
Echt evident is het echter niet.
1 van de grote problemen is de manier waarop php werkt.
Php begint pas te werken wanneer het volledige verzoek is aangekomen.
Dus, bij het uploaden: pas wanneer het bestand volledig op de server is toegekomen, begint php het script uit te voeren.
Je kan dus niet aan php vragen om tijdelijke boodschappen te sturen.
Hmm lijkt niet te werken, percentage blijft staan op 'NaN%' en als hij klaar is zegt hij gewoon File Uploaded
http://www.scriptorama.nl/browsers/hoe-maak-ik-een-file-upload-progress-bar-met-php
Maar dan moet je wel wat installeren.. Iets wat bij hostingproviders vaak niet zomaar kan helaas.
Maar dan moet je wel wat installeren.. Iets wat bij hostingproviders vaak niet zomaar kan helaas.
Bedankt maar inderdaad dat gaat niet gaan bij mij hosting denk ik..
Je kan die truc met de iframe en js wel gebruiken, om aan te geven dat er wel iets gaande is.
@Mebus, leuke extensie, bedankt voor de link.
@Mebus, leuke extensie, bedankt voor de link.
Heb je een voorbeeld? Geen idee hoe ik hieraan begin..
Zoiets kan m.b.v. javascript:
vervolgens zet je ergens bij je formulier een laadbalkje neer(display:none;) met het id loadingBar, deze kan je van bijv http://www.ajaxload.info/ halen.
Dan als iemand op je button click moet je het laadbalkje laten zien, dus bij je button doe je:
En dan als het gelukt is, of niet gelukt, dan doe je in PHP:
Ik denk niet dat dit de beste manier is, maar het is een manier..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function showLoadingBar()
{
document.getElementById('loadingBar').style.display = 'block';
}
function hideLoadingBar()
{
document.getElementById('loadingBar').style.display = 'none';
}
</script>
function showLoadingBar()
{
document.getElementById('loadingBar').style.display = 'block';
}
function hideLoadingBar()
{
document.getElementById('loadingBar').style.display = 'none';
}
</script>
vervolgens zet je ergens bij je formulier een laadbalkje neer(display:none;) met het id loadingBar, deze kan je van bijv http://www.ajaxload.info/ halen.
Dan als iemand op je button click moet je het laadbalkje laten zien, dus bij je button doe je:
En dan als het gelukt is, of niet gelukt, dan doe je in PHP:
Code (php)
Ik denk niet dat dit de beste manier is, maar het is een manier..
Gewijzigd op 16/01/2013 18:51:36 door Bo Ter Ham
Vind ik een prima oplossing, zo weet de user toch dat de server bezig is met het verwerken van het formulier.
Bedankt!
Bedankt!
Bo, het is niet een manier, want het werkt niet.
Als met het verzenden van het formulier een PHP script aanroept in een iframe, moet in de iframe de javascript uit de parent worden aangeroepen.
dus:
Even uit mijn hoofd.
Maar het jQuery voorbeeld uit Mebus zijn link werkt net zo makkelijk, alleen kan je de precieze voortgang niet bijhouden.
Als met het verzenden van het formulier een PHP script aanroept in een iframe, moet in de iframe de javascript uit de parent worden aangeroepen.
dus:
Even uit mijn hoofd.
Maar het jQuery voorbeeld uit Mebus zijn link werkt net zo makkelijk, alleen kan je de precieze voortgang niet bijhouden.
Edit:
Teveel uit mijn hoofd dus ;-)
Teveel uit mijn hoofd dus ;-)
Gewijzigd op 16/01/2013 19:11:13 door Ger van Steenderen
Waarom zou het niet werken?
Gewijzigd op 16/01/2013 19:12:14 door Bo Ter Ham




