Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS File API : Démo HTML5

Mise à jour : 2017-01-22
Cette API permet de manipuler les fichiers côté client et non plus seulement côté serveur.

File API

Notes sur le tuto


Exemple de code HTML5

Sélectionnez plusieurs images<br>
<input type="file" accept="image/*" multiple onchange="filesProcess(this.files)"
	name="selection"/><br>
<span id="result">...</span>
<script>
function filesProcess(files){
	selection = "<table><tr><th>Nom</th><th>Type MIME</th><th>Octets</th><th>Miniature</th></tr>"
	for(i=0; i<files.length; i++){
		selection += "<tr><td>"+files[i].name+"</td><td>"
			+files[i].type+"</td><td style=\"text-align:right\">"
			+files[i].size+"</td><td><img src=\""
			+window.URL.createObjectURL(files[i])+"\" style=\"width:100px\"></td></tr>"
		window.URL.revokeObjectURL(files[i])}
	selection += "</table>"
	document.getElementById("result").innerHTML = selection}
</script>

Démonstration du résultat HTML5


Sélectionnez plusieurs images

...

Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isAttributeSpecified("selection", "files");
	isAttributeSpecified("selection", "accept");
	isAttributeSpecified("selection", "multiple");
	isItemSupported("window.URL.createObjectURL", true)
</script>		

Can I Use fileapi? Data on support for the fileapi feature across the major browsers from caniuse.com.