Files uploaden met progressbar
Joshua Eichorn is eens aan de slag gegaan met het maken van een progressbar voor gebruik bij het uploaden van bestanden zodat de gebruiker kan zien hoe ver een bestand reeds geupload is en hoe lang het nog gaat duren:
Update: Zie ook onze eigen tutorial: Hoe maak ik een file upload progress bar met php?.
There and Back again - AJAX File Upload Progress Meter
The basic way the code works is we take a form containing a file upload and submit it using a hidden iframe as a target. Doing this lets the upload happen in the background. Then we poll the server on a regular basis (say a 2 second interval) asking it for update status. If you have the patch+extension installed this gives you file upload speed etc. If you don’t have the extesion we stop making AJAX calls and just animate the status bar until the upload finishes in the iframe and tells us were done.
Zoals je leest heb je zowel een patch voor PHP als een aparte extensie nodig om de upload snelheid te zien. Maar gelukkig heeft hij ook een methode gemaakt waarmee je ook een progressbar kunt tonen zonder dat je deze patch+extensie nodig hebt. Je mist dan alleen wel de upload snelheid en de progressbar blijft gewoon heen en weer lopen tot dat de file geupload is.
Wat ik persoonlijk heel erg jammer vind is dat de browsers zelf nog steeds zelf geen oplossing hiervoor bieden. Ik realiseer me wel dat het niet in een of andere standaard staat maar helaas lijkt zelfs de Web Applications 1.0 specificatie, meer info hier, hier ook met geen woord over te reppen.
Er wordt wel ontwikkeld aan de browsers: we hebben inmiddels wel een <canvas> tag waar je met javascript op kunt tekenen en er is SVG support maar een beetje knap File-input element is kennelijk te veel gevraagd. Zover ik weet kun je nog steeds geen eigen tekst voor de Browse knop opgeven, bijvoorbeeld. Met een klein beetje werk zouden de browser ontwikkelaars behoorlijk wat "hacks" (coole hacks, maar hacks nonetheless) als deze uit de weg kunnen ruimen
Volg Scriptorama via RSS!
on 
on 
on 
on 
on
Reageer ook!
Bedenk wel dat je door een slim upload element het uiteindelijke doel van http tegen gaat. Het protocol is niet voor de overdracht van grote bestanden, daar hebben we nog altijd ftp voor.
Er zit een foutje in de link naar de weblog van Joshua Eichorn.
Door Edwin V.
op 03.15.06 @ 1:07 pm | Permalink
Het gaat niet perse om grote bestanden, maar om de minieme visual feedback die browsers nu geven.
Daarbij, FTP is niet echt nuttig als je in een CMS setting zit. Je wilt niet voor iedere CMS user een fysieke FTP user aanmaken, lijkt me. Laat staan deze mensen leren met NOG een programma te werken..
Er zat inderdaad een foutje in de link, gefixt, en bedankt :)
Door Mathieu
op 03.15.06 @ 1:52 pm | Permalink
"Het gaat niet perse om grote bestanden, maar om de minieme visual feedback die browsers nu geven."
Met kleinere bestanden heb je het probleem minder, want dan is de upload tijd korter.
Ik ben het met je eens dat de gebruiksvriendelijkheid van de input type upload niet optimaal is, maar als ik mensen in een cms veel (grote) bestanden moet laten uploaden zal ik daar zeker een andere mogelijkheid voor gaan zoeken. De drempel om gebruikers van een cms te leren om gaan met een ftp programma ligt inderdaad hoog. Wellicht dat Java of Flash applicaties dan een uitkomst bieden.
Door Edwin V.
op 03.15.06 @ 6:15 pm | Permalink
het ligt er dus maar net aan wat de klant wil... als ze 1 x per week een pdfje willen kunnen uploaden zal ik er geen java applet onder hangen, en is zo'n status feature zeker netjes...
Door 1337 n00b
op 03.15.06 @ 8:46 pm | Permalink
Gelukkig biedt Flash wel alle mogelijkheden voor een progressbar. Daarnaast kun je in Flash ineens de hele inhoud van een map uploaden, waarbij Flash de bestanden één voor één post. Je script hoeft dan maar één bestand per keer te verwerken en je zit dus ook niet zo snel aan een post limiet.
De Flash plugin heeft al een erg hoge penetratiegraad en voor een CMS kun je het als eis stellen om het CMS te kunnen gebruiken.
Door Vincent
op 03.17.06 @ 11:47 am | Permalink
Dat is interessant, maar helaas dus wel een externe plugin wat het direct minder interessant maakt.
Ik vind toch dat dit een taak is die voor de browser zelf weg gelegd is. Hoewel Edwin gelijk heeft te zeggen dat HTTP niet echt bedoeld is voor uploads, lijkt het me dat als zoveel mensen zo graag willen uploaden via hun browser dat hier dan een speciale implementatie voor zou kunnen komen.
Door Mathieu Kooiman
op 03.17.06 @ 12:54 pm | Permalink
Maar je weet hoelang dat gaat duren, áls het er komt. Zou het dan in IE 9 ingebouwd worden? Standaarden zijn leuk, maar werken alleen echt als de browser bouwers meewerken.
Ik maak op dit punt geen onderscheid in javascript en Flash; beide zijn clientside en beide kunnen uitgeschakeld worden. In een webapplicatie die voor een selecte groep mensen bedoeld is, kun je er gerust vanuit gaan dat de bezoekers over de plugin beschikken. Vanaf IE 5 zit de plugin al standaard in IE. Daarnaast is de plugin klein en trusted door alle browsers.
Door Vincent
op 03.17.06 @ 1:21 pm | Permalink
Ik realiseer me dat het allemaal onwaarschijnlijk is, neemt niet weg dat ik het graag zou zien ;-)
Door Mathieu Kooiman
op 03.17.06 @ 1:51 pm | Permalink
Wat gebruikt hyves.nl dan voor het uploaden van fotos?
Door Louis
op 04.17.06 @ 11:22 am | Permalink
Ik heb m'n vriendin bij haar hyves account laten kijken en het lijkt er op dat zij een of ander ranzig ActiveX component gebruiken voor het uploaden.. Blegh! Ook leuk in samenhang met http://www.scriptorama.nl/security/patches-voor-internet-explorer-6
Door Mathieu
op 04.17.06 @ 12:35 pm | Permalink
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>