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 :
Siden er sidst opdateret mandag 25. juni 2018