Over het uploaden van files naar de server

Veel websites hebben een mailformulier voor het versturen van berichten naar bijvoorbeeld de webmaster. Als je met zo'n bericht een bijlage zou willen meesturen moet je dat eerst uploaden naar de server. Op de server moet je dan wel beschikken over een script waarmee je de ge-uploade file verder kunt behandelen.

Je provider moet het uploaden van files toestaan. Bij professionele webhosting­pakketten is dat meestal wel het geval. Bij eenvoudige pakketten die worden geleverd bij een ADSL-abonnement of het lidmaatschap van een vereniging (zoals deze) kan het gewoonlijk niet, omdat de noodzakelijke server-side scripttalen niet beschikbaar zijn.
Raadpleeg in voorkomende gevallen je provider.

Op deze bladzijde wordt de HTML beschreven die je in een formulier kunt gebruiken om een file vanaf je site te uploaden naar de server.
De code zelf is niet beschikbaar voor downloaden, er wordt alleen een beschrijving gegeven.

Zoals opgemerkt moet je aan de serverkant ook het een en ander programmeren. Dat gebeurt vaak in ASP, ASP.NET of PHP. Dat maakt dat deze techniek iets is voor gevorderden.

Bespreking van server-side scripts valt buiten het bestek van deze website en blijft daarom achterwege. Op internet zijn voldoende server-side scripts te vinden, ook freeware.

• Het is absoluut noodzakelijk dat je aan de kant van de server beschikt over een programma of een script dat het geuploade bestand opvangt en weet wat er mee moet gebeuren (opslaan, scannen, doorsturen, enz.). Als je die mogelijkheid niet hebt, is het zinloos dit in je website te gebruiken.
   
• De code voor een upload-veld ziet er als volgt uit:
  
  <form method="post" action="script_op_server" enctype="multipart/form-data">
    <input type="file" name="upload">
  </form>
  
  Je zou verwachten dat er nu een invoerveld te zien is. Dat is echter niet zo, je krijgt "gewone" tekst te zien.
• In je browser ziet het er als volgt uit:
  
• De button wordt automatisch naast het invoerveld geplaatst.
• Het hangt van je browser af welke tekst er in de button komt te staan. In FireFox staat er 'Bladeren...'. In Edge en Chrome staat er 'Bestand kiezen...'.
• De naam van de gekozen file wordt naast de knop getoond. Die kun je niet direct invullen, maar dat moet via de bestandsbrowser van het Operating System (Windows, MacOS, Linux, …). Als je nog geen bestand hebt gekozen staat er in Edge en Chrome: 'Geen bestand gekozen'. In FireFox staat er: 'Geen bestand geselecteerd'.
• Om het formulier naar de server te sturen gebruik je een 'submit'-button, net zoals bij elk ander formulier.
  "  
• Om files te kunnen uploaden moet je de <form>-tag in elk geval deze attributen mee geven:
  
  • method="post". Met method="get" zal het niet werken!
  • action="(script op de server)". Hiermee geef je aan welk script het formulier moet verwerken. Dat script moet er ook voor zorgen dat er iets met de ge-uploade file gebeurt. Denk hierbij aan opslaan, bewerken, voor andere gebruikers van de website beschikbaar maken, enz.
  • enctype="multipart/form-data". Hiermee geef je aan dat er behalve formulier-data ook andere gegevens naar de server worden gestuurd.
• De <input>-tag heeft type="file". Hiermee koppel je het bestand dat je wilt uploaden aan het formulier. Er verschijnt naast het tekstveld een knop waarmee je je eigen PC kunt door bladeren om het gewenste bestand te kiezen. Deze knop is 'hard': je kunt de tekst niet wijzigen of vervangen door een plaatje.
• Behalve het attribuut type kun je ook andere attributen gebruiken:
  • name="...". Met dit attribuut stel je een naam in, die gebruikt kan worden door het script dat het formulier afhandelt. Dit is dus niet de naam van een file!
    In plaats van name kun je ook (en soms beter) id gebruiken.
  • size="...". Dit gebruik je om de breedte van het invoerveld dat op het scherm verschijnt te veranderen (lees: groter te maken). De default-instelling, die op deze pagina is gebruikt, is voor veel toepassingen te klein. Pathnamen kunnen nl. erg lang zijn. Het is voor de gebruikers van je site niet handig als het grootste deel van de gekozen pathname uit beeld verdwijnt.
    N.B.: Het is niet mogelijk om het maximale aantal karakters in het invoerveld te beperken met maxlength. Dat zou ook niet handig zijn, want pathnamen hebben in principe een onbeperkte lengte.
  • accept="...". Hiermee zou je, volgens de HTML-standaard, het type bestanden wat je kunt uploaden moeten kunnen aangeven. Voor grafische files zou je dan gebruiken: accept="image/.JPG, image/.GIF, image/.PNG".
• Het attribuut value="..." om een default filenaam in het invoerveld te zetten, is niet in de standaard opgenomen. De meeste browsers Opera ondersteunen het dan ook niet.

Tenslotte:
Er bestaan ook andere manieren om bestanden te uploaden naar de server van een website, bijvoorbeeld met een plugin . Je ziet dat wel als er (veel) beeldmateriaal moet worden geüpload, zoals bij foto-afdrukdiensten.