HTML <input type='file'> appliquer un filtre

Question

maintenant, lorsque je cliquerai sur le bouton parcourir, la boîte de dialogue de parcours affichera tous les fichiers... que faire si je veux filtrer les types de fichiers disons

• seulement des images ou .png & .jpg & .gifs
• seulement des fichiers office comme .doc & .docx & .pps

comment faire...

Answer 1

Je pense que vous cherchez le paramètre accept. Essayez cela fonctionne

Answer 2

Il y a un attribut "accept" sur les contrôles de saisie de fichiers, où vous pouvez spécifier les types de fichiers que vous souhaitez. D'après ce que je vois, cependant, de nombreux navigateurs aiment l'ignorer - les types de fichiers qui peuvent être spécifiés sont des types MIME, donc un navigateur strictement correct devrait regarder chaque fichier indépendamment de l'extension et vérifier s'il s'agit d'une image (et si c'est le cas, quel type il s'agit).

Mise à jour: Il semble qu'au moins certaines versions de chaque navigateur majeur sur Windows offrent désormais un certain support pour l'attribut accept. (Même IE le supporte, à partir de la version 10.) Cependant, il est encore un peu tôt pour s'y fier, car IE 8 et 9 ne le prennent toujours pas en charge. Et le support en général est un peu aléatoire.

• Chrome semble avoir un support complet. Il utilise sa propre liste de types intégrés ainsi que ceux du système... donc si l'un des deux définit le type, Chrome sait quels fichiers afficher.
• IE 10 prend bien en charge les extensions de fichiers, et les types MIME correctement. Il semble utiliser uniquement la correspondance du système de type MIME avec les extensions... ce qui signifie essentiellement que si quelque chose sur l'ordinateur de l'utilisateur n'a pas enregistré ces extensions avec les bons types MIME, IE ne montrera pas les fichiers de ces types MIME.
• Opéra semble uniquement prendre en charge les types MIME - au point où les extensions désactivent en fait le filtre - et l'interface utilisateur pour le sélecteur de fichiers est mauvaise. Vous devez sélectionner un type pour voir les fichiers de ce type.
• Firefox semble prendre en charge seulement un ensemble limité de types, et ignorer les autres types ainsi que les extensions.
• Je n'ai pas Safari et je n'ai pas l'intention de le télécharger. Si quelqu'un pouvait documenter le support de Safari... Support partiel sur Safari. http://caniuse.com/#search=accept

Vous devriez envisager d'ajouter l'attribut, ainsi les navigateurs qui le supportent peuvent aider l'utilisateur à trouver plus facilement les bons fichiers. Mais je vous suggérerais quand même de vérifier le nom de fichier après que le fichier a été sélectionné et d'afficher un message d'erreur si un fichier avec la mauvaise extension est téléchargé.

Et bien sûr, assurez-vous que le serveur vérifie également que le fichier est du bon type. Les extensions de fichier ne sont qu'une convention de nommage, et peuvent être facilement contournées. Et même si nous pouvions faire confiance au navigateur (ce qui n'est pas le cas), et même s'il essayait de filtrer les choses comme demandé (ce qu'il pourrait ne pas faire), la probabilité qu'il vérifie réellement que ce fichier .doc est vraiment un document Word est proche de zéro.

Answer 3

Il devrait utiliser MIME_type: Par exemple

ceci acceptera uniquement le type de fichier *.xlsx...

Pour la liste des types MIME, consultez le lien ci-dessous:
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 4

Vous ne pouvez pas contrôler quels fichiers peuvent être sélectionnés, mais vous pouvez lire le nom de fichier avec javascript après que le fichier est choisi. Vous pourriez alors afficher un avertissement et/ou désactiver le bouton de soumission si le fichier est du mauvais type. Cependant, rappelez-vous que vous ne pouvez pas vous fier à l'extension pour vous dire si le fichier est vraiment du bon type. Il ne devrait être traité que comme un moyen d'aider les utilisateurs qui pourraient autrement perdre du temps à télécharger un gros fichier avant de découvrir que vous ne prenez pas en charge ce type de fichier.

Voici un exemple de code pour faire cela. Il utilise jQuery, mais vous pourriez faire la même chose en javascript simple aussi.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Veuillez sélectionner un fichier texte');
        }
    });
});

Answer 5

Vous devriez utiliser l'un des plugins qui utilisent Flash intégré, car vous ne pouvez pas le faire avec du javascript simple