File API : Démo HTML5
Mise à jour : 2017-01-22
File API
- files : liste des fichiers sélectionnés :
- .name : nom avec extension.
- .size : taille en octets.
- .type : type MIME
- Attributs de <input type="file"> :
- accept="eReg" : filtre les fichiers dans l'explorateur par une expression régulière.
- multiple : permet de sélectionner plusieurs fichiers.
- ...
Notes sur le tuto
- L'exemple ci-dessous est inspiré de cet article pour la sélection multiple, et de cet article pour l'affichage de la miniature.
- Voir aussi : Media Capture
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>