web-dev-qa-db-fra.com

restreindre la sélection de téléchargement de fichiers à des types spécifiques

Quoi qu'il en soit pour restreindre la sélection des types de fichiers via le <input type="file" /> élément?

Par exemple, si je voulais que seuls les types d'images soient téléchargés, je limiterais les sélections possibles à (image/jpg, image/gif, image/png), et la boîte de dialogue de sélection griserait les fichiers d'autres types MIME.

p.s. Je sais que je peux le faire après coup avec l'API File en analysant les attributs .type. J'essaie vraiment de restreindre cela avant la main .. Je sais aussi que je peux le faire via flash, mais je ne veux PAS utiliser le flash pour cela.

html5file-uploadfileapi
48
ndmweb

Il existe un attribut html à cette fin spécifique appelé accept mais il a peu de support sur les navigateurs. En raison de cette validation côté serveur est recommandée à la place.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

Si vous n'avez pas accès au backend, jetez un œil à une solution basée sur le flash comme SWFUpload .

Voir plus à ce sujet ici: Attribut 'accept' d'entrée de fichier - est-ce utile?

63
amosrivera

Il est préférable de laisser l'utilisateur sélectionner n'importe quel fichier, puis de vérifier son type - cela est mieux pris en charge par les navigateurs:

var
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined),
    supportedFormats = ['image/jpg','image/gif','image/png'];

if (file && file.type) {
    if (0 > supportedFormats.indexOf(file.type)) {
        alert('unsupported format');
    }
    else {
        upload();
    }
}

Vous pouvez également vérifier la taille du fichier en utilisant la propriété file.size.

8
Radek Pech