Loading bar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sam H

Sam H

16/01/2013 16:42:56
Quote Anchor link
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
Gewijzigd op 16/01/2013 16:43:45 door Sam H
 
PHP hulp

PHP hulp

22/01/2020 09:44:25
 
Kris Peeters

Kris Peeters

16/01/2013 16:58:42
Quote Anchor link
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.
 
Sam H

Sam H

16/01/2013 17:11:37
Quote Anchor link
Hmm lijkt niet te werken, percentage blijft staan op 'NaN%' en als hij klaar is zegt hij gewoon File Uploaded
 
Mebus  Hackintosh

Mebus Hackintosh

16/01/2013 18:13:18
Quote Anchor link
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.
 
Sam H

Sam H

16/01/2013 18:22:46
Quote Anchor link
Bedankt maar inderdaad dat gaat niet gaan bij mij hosting denk ik..
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/01/2013 18:42:57
Quote Anchor link
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.
 
Sam H

Sam H

16/01/2013 18:43:54
Quote Anchor link
Heb je een voorbeeld? Geen idee hoe ik hieraan begin..
 
Bo Ter Ham

Bo Ter Ham

16/01/2013 18:51:13
Quote Anchor link
Zoiets kan m.b.v. javascript:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<input type="submit" name="uploaden" value="Uploaden" onclick="showLoadingBar()" />


En dan als het gelukt is, of niet gelukt, dan doe je in PHP:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<?php
echo 'Het bestand is succesvol geupload.';
echo '<script type="text/javascript">hideLoadingBar();</script>';
?>


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
 
Sam H

Sam H

16/01/2013 18:54:58
Quote Anchor link
Vind ik een prima oplossing, zo weet de user toch dat de server bezig is met het verwerken van het formulier.
Bedankt!
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/01/2013 19:02:46
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<script>
window.top.window.hideProgressBar();
</script>

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 ;-)
Gewijzigd op 16/01/2013 19:11:13 door Ger van Steenderen
 
Bo Ter Ham

Bo Ter Ham

16/01/2013 19:11:58
Quote Anchor link
Waarom zou het niet werken?
Gewijzigd op 16/01/2013 19:12:14 door Bo Ter Ham
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.