HTML: Comment limiter le téléchargement de fichiers à de simples images?

Question

Avec HTML, comment limiter les types de fichiers pouvant être téléchargés?

Pour faciliter l'expérience utilisateur, je souhaite limiter le nombre de téléchargements de fichiers à des images (jpeg, gif, png).

 <form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>
 

Answer 1

HTML5 dit <input type=file accept="image/*"> . Bien sûr, ne faites jamais confiance à la validation côté client; toujours vérifier à nouveau sur le serveur.

Answer 2

Le fichier HTML5 a un attribut accept et un attribut multiple. En utilisant plusieurs attributs, vous pouvez télécharger plusieurs images dans une instance.

 <input type="file" multiple accept='image/*'>
 

Vous pouvez également limiter plusieurs types de mime.

 <input type="file" multiple accept='image/*|audio/*|video/*' >
 

et une autre façon de vérifier le type mime en utilisant un objet fichier.

objet de fichier vous donne le nom, la taille et le type.

 var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type
 

Vous pouvez également limiter l'utilisateur pour certains types de fichiers à télécharger à l'aide du code ci-dessus.

Answer 3

Édité

Si les choses étaient comme elles DEVRAIENT l'être, vous pouvez le faire via l'option "Accepter" attribut.

http://www.webmasterworld.com/forum21/6310.htm

Cependant, les navigateurs assez beaucoup ignorent, c'est donc irrelavant. La réponse courte est, je ne pense pas qu'il existe un moyen de le faire en HTML. Vous devriez vérifier côté serveur à la place.

Le suivant vieux poste a quelques informations qui pourraient vous aider avec des solutions de rechange.

http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful

Answer 4

Vous ne pouvez le faire que de manière sécurisée côté serveur. L'utilisation de l'attribut "accept" est bonne, mais vous devez également la valider côté serveur pour que les utilisateurs ne puissent pas se connecter à votre script sans cette limitation.

Je vous suggère de: supprimer tout fichier non-image, avertir l'utilisateur et réafficher le formulaire.

Answer 5

Extraire un projet appelé Uploadify. http://www.uploadify.com/

C'est un téléchargeur de fichiers basé sur Flash + jQuery. Ceci utilise la boîte de dialogue de sélection de fichier de Flash, qui vous permet de filtrer les types de fichier, de sélectionner plusieurs fichiers en même temps, etc.