File API - JavaScript

Her vil jeg skrive om JavaScript File API når jeg engang har lært det

Introduktion

Når man laver en formular med et <input type="file"> element så er det lidt irriterende at man får et meget forskellige udseende på det element alt efter hvad browser man bruger og man kan ikke vælge teksten på knappen.

Med file API kan man få et ensartet udseende.

Demo

Standard udseende på <input type="file"> som variere fra browser til browser :


Ved at skjule <input type="file"> og bruge JavaScript File API kan man selv bestemme hvordan linket/billedet/knappen skal se ud :

Vælg en fil fra computeren...

Vælg en fil fra computeren...

FILE API DEMO
(PÅ EN SIDE FOR SIG SELV)

Her kan man vælge en eller flere filer og få oplyst antal filer og deres samlede størrelse

Antal filer : ?; Størrelse : ?

Browsertest

Jeg er ikke helt sikkert på denne test så regn ikke med den endnu.

Browserunderstøttelse af file API

Jeg har ikke rigtig styr på det her endnu. Har kun testet det lidt.
Browser
Firefox logo
Firefox 12.0
.click test
input.files
Opera logo
Opera 11.62 Build 1347
input.files
Safari logo
Safari 5.1.5
input.files
Chrome logo
Chrome 18.0.1025.168 m
input.files
Internet Explorer logo
Internet Explorer 9
.click test
input.files er undefined)
Alle tests er udført på Windows 7 (64-bit)


input.files returner antal filer som er valgt i input feltet. Hvis der ikke er valgt nogen så returnes 0.
Browserunderstøttelse fra caniuse.com :

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.