Vælg fil - File select

I HTML er en filvalgskontrol en komponent i en webform, som en bruger kan vælge en lokal fil med. Når formularen indsendes (måske sammen med andre formdata), uploades filen til webserveren . Der, når filen ankommer, sker der som regel handling, som at gemme filen på webserveren. Den bestemte handling, der finder sted, bestemmes dog af det serversidescript, som formularen sendes til.

Kodeeksempel

Her er et kodeeksempel på en webformular med en filvalgskontrol. Det er inputelementet type="file"der skaber filvælgskontrollen. 

<form action="form-handler.php" method="post" enctype="multipart/form-data">
	<div>
		<input id="myfile" name="myfile" type="file">
		<input value="Upload ►" type="submit">
	</div>
</form>

gengivelse

Når det kommer til gengivelsen på skærmen til en filvalgskontrol, er der en vis variation blandt webbrowsere . På en Windows-baseret platform vil brugeragenter typisk give en filvalgskontrol som et tekstfelt sammen med en "Gennemse" -knap. Når der trykkes på knappen "Gennemse", åbnes en fildialog , som det aktuelle filvalg på ens platform kan finde sted med. Efter valg vises filnavnet på den valgte fil i tekstfeltet med dets fulde sti. I stedet for at bruge knappen "Gennemse" kan filnavnet indtastes direkte i tekstfeltet.

Nogle browsere, især Firefox , tillader ikke længere, at et filnavn skrives direkte i. Dette er en sikkerhedsforanstaltning - det er muligt at narre brugeren til at uploade fortrolige oplysninger.

Funktionalitet

Mekanismen til form-baseret fil upload blev oprindeligt foreslået i RFC 1867 (offentliggjort november 1995), som en udvidelse til HTML 2.0 ( RFC 1866 ), efter dens offentliggørelse. Form-baseret fil upload blev derefter inkorporeret i HTML 3.2, der eksplicit henviser til RFC 1867 for yderligere information om form-baseret fil upload.

HTML 4.01 beskriver ikke i sig selv, hvordan filvalgskontrollen skal fungere, men den viser RFC 2388 og RFC 1867 som referencer.

Valg af flere filer

Intensionen i RFC 1867 er, at en enkelt filvalgskontrol skal tillade valg af flere filer. Denne hensigt synes afspejlet i HTML 4.01, som for filtypekontroltypen angiver

Denne kontroltype giver brugeren mulighed for at vælge filer, så deres indhold kan indsendes med en formular. INPUT-elementet bruges til at oprette en filvalgskontrol.

Det er blevet bemærket, at flertallet "filer" i ovenstående citat er en indikation af, at i HTML 4.01 stadig skulle en enkelt-fil-valgkontrol skulle håndtere valg af flere filer og ikke kun en enkelt fil.

Denne situation afklares i HTML5 ved at tilføje en "multiple" attribut, når filinputet skal acceptere flere filer. Det nuværende udkast specificerer den nye adfærd, der skal være:

Medmindre den flere attribut er indstillet, skal der ikke være mere end en fil på listen over valgte filer.

Accepter attribut

RFC 1867 introducerede også acceptattributten for inputelementet. Dette vil muliggøre filtypefiltrering baseret på MIME-typen til filvælgskontrollen.

Derudover foreslås det, at INPUT-mærket har en ACCEPT-attribut, som er en liste over komma-adskilte medietyper.

Hvis der findes en ACCEPT-attribut, kan browseren muligvis begrænse de filmønstre, der bliver bedt om at matche dem med de tilsvarende passende filtypenavne til platformen.

En brugeragent kan således begrænse valg af fil, som for eksempel i det følgende, begrænset til GIF- og PNG-billeder eller ethvert billede: 

<input id="myfile" name="myfile" type="file" accept="image/gif,image/png">
<input id="myfile" name="myfile" type="file" accept="image/*">

På en Windows-platform kan dette muligvis betyde, at brugeragenten kun viser filer af de typer, der er angivet i browsefil-dialogen.

Browserbegrænsninger

Grundlæggende understøttelse af filvalgskontrol blev hurtigt vedtaget af browserudbydere. For eksempel genkendte allerede Internet Explorer 4, Netscape Navigator 2.0 og Opera 3.5 inputelementet type="file"som en filvalgskontrol.

De fleste moderne browsere implementerer dog stadig ikke filvalgskontrollen, som den var beregnet til, eller mangler visse funktioner.

Kan ikke vælge flere filer

Form-baseret upload af flere filer med en enkelt filvalgskontrol understøttes i nuværende versioner af Chrome, Firefox, Internet Explorer, Safari og Opera. En kilde oplyser, at Opera understøtter valg af flere filer gennem en enkelt filvalgskontrol. Dette var tilfældet for Opera-versioner fra 3.5, hvor fil-upload-funktionen blev introduceret. Med den første betaversion af Opera 7-linjen var denne funktion imidlertid ikke længere tilgængelig. Firefox version 3.6 begyndte at understøtte valg af flere filer, hvilket giver udvikleren en vis begrænset adgang til selve filerne, inden de blev uploadet til serveren, via HTML5 File API. Denne funktion giver også brugere mulighed for at trække og slippe filer fra eksterne applikationer (f.eks. Windows Stifinder ) direkte til webapplikationen. Et bemærkelsesværdigt eksempel på support til denne funktion er Gmail, der giver mulighed for at tilføje vedhæftede filer på denne måde.

HTML5 tillader flere fil uploads ved hjælp af flere attribut på input elementer.

JavaScript-alternativ

En løsning er at bruge scripting på klientsiden, f.eks. JavaScript, til at generere en ekstra fil-valg-kontrol for hver fil, som brugeren vælger til upload. Ved hjælp af CSS kan disse ekstra filvalgskontroller indstilles til ikke at blive vist. Et eksempel på denne teknik er vist i plugin til flere filer upload til jQuery . På denne måde løses problemet med upload af flere filer ved at tilvejebringe så mange filvalgskontroller, som brugeren har filer, der skal uploades. Stadig løser dette ikke problemet med at vælge flere filer til upload i Internet Explorer.

Accepter attributstøtte

Acceptattributten understøttes i øjeblikket af Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ og Microsoft Internet Explorer 10+.

Referencer

  1. ^ "388784 - (CVE-2007-3511) Firefox filinputfokus stjæler sårbarhed" . Bugzilla.mozilla.org . Hentet 2013-09-02 .
  2. ^ "Sårbarhed ved upload af Mozilla Firefox OnKeyDown-hændelsesfil" . Juniper.net. 2010-11-15 . Hentet 2013-09-02 .
  3. ^ "HTML 4-specifikationshenvisninger" . W3.org . Hentet 2013-09-02 .
  4. ^ "Formularer i HTML-dokumenter" . W3.org . Hentet 2013-09-02 .
  5. ^ a b c "Filinput (eller" upload ") i HTML-formularer" . Cs.tut.fi . Hentet 2013-09-02 .
  6. ^ "HTML 5.1-specifikation" . W3C.
  7. ^ "input type = file Object" . Msdn2.microsoft.com. 2013-07-22 . Hentet 2013-09-02 .
  8. ^ a b "Browserhistorie: Opera" . Blooberry.com . Hentet 2013-09-02 .
  9. ^ den 10. december 2009 af Paul Rouget (2009-12-10). "flere filinput i Firefox 3.6 ✩ Mozilla Hacks - Webudviklerbloggen" . Hacks.mozilla.org . Hentet 2013-09-02 .
  10. ^ "Brug af filer fra webapplikationer - MDC" . Developer.mozilla.org. 2013-08-23 . Hentet 2013-09-02 .
  11. ^ HTML 5.1-specifikation: 4.10.5.3 Almindelige inputelementattributter

eksterne links