web-dev-qa-db-fra.com

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

<input type='file' name='userFile'>

maintenant, lorsque je clique sur le bouton de navigation, la boîte de dialogue de navigation affiche tous les fichiers ... Et si je veux filtrer les types de fichiers, disons

  • uniquement des images ou .png & .jpg & .gifs
  • seul le fichier office tel que .doc & .docx & .pps

comment faire...

htmlformsfilefilter
40
Moon

Il existe un attribut "accept" sur les contrôles d'entrée de fichier, dans lequel vous pouvez spécifier les types de fichiers souhaités. De ce que je vois, cependant, de nombreux navigateurs préfèrent l’ignorer - les types de fichiers pouvant être spécifiés sont des types MIME. Par conséquent, un navigateur strictement correct devrait examiner chaque fichier, quelle que soit son extension, et voir s’il s’agit d’une image ( et si oui, de quel type s'agit-il).

Update: Il semble qu'au moins une version de tous les principaux navigateurs de Windows offre maintenant au moins une prise en charge de l'attribut accept. (Même IE le supporte, à partir de la version 10.) Cependant, il est encore un peu tôt pour pouvoir compter dessus, car IE 8 et 9 ne le prennent toujours pas en charge. Et le support en général est un peu inégal.

  • Chrome semble avoir un support complet. Il utilise sa propre liste intégrée de types ainsi que celle du système ... donc si l'un définit le type, Chrome sait quels fichiers afficher.
  • IE 10 prend en charge les extensions de fichiers de manière élégante et les types MIME de manière décente. Il semble utiliser uniquement le mappage du type MIME du système avec les extensions, ce qui signifie que si quelque chose sur l'ordinateur de l'utilisateur n'enregistre pas ces extensions avec les bons types MIME, IE ne montrera pas les fichiers de ces types MIME.
  • Opera ne semble prendre en charge que les types MIME - au point que les extensions désactivent réellement le filtre - et que l'interface utilisateur du sélecteur de fichier est nulle. Vous devez sélectionner un type pour voir les fichiers de ce type.
  • Firefox semble ne prendre en charge qu'un nombre limité de types et ignorer les autres types ainsi que les extensions.
  • Je n'ai pas Safari et je ne prévois pas de le télécharger. Si quelqu'un pouvait documenter le support de Safari ... Support partiel en safari. http://caniuse.com/#search=accept

Vous devez envisager d'ajouter cet attribut afin que les navigateurs qui le prennent en charge puissent aider l'utilisateur à trouver les bons fichiers plus facilement. Mais je vous suggère quand même de vérifier le nom du fichier après la sélection du fichier et d'afficher un message d'erreur si un fichier avec une extension incorrecte est téléchargé.

Et bien sûr, demandez au serveur de vérifier que le fichier est du bon type. Les extensions de fichier sont juste une convention de nommage, et peuvent être facilement subverties. Et même si nous pouvions faire confiance au navigateur (ce que nous ne pouvons pas), et même s'il tentait de filtrer les éléments comme vous le demandiez (ce qui pourrait ne pas être le cas), la possibilité qu'il vérifie réellement que ce fichier .doc est réellement un document Word est proche de zéro.

35
cHao

Je pense que vous recherchez le paramètre accepter. Essayez cela fonctionne

<input type="file" accept="image/*" />
37
ravi404

Il devrait utiliser MIME_type: Par exemple

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

cela acceptera seulement le type de fichier *.xlsx ...

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

9
JMnerd

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

Voici un exemple de code pour le faire. Il utilise jQuery, mais vous pouvez aussi faire la même chose en clair.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});
6
stevemegson

Vous pouvez utiliser JavaScript. Notez que le gros problème avec JavaScript est de réinitialiser le fichier d’entrée. Eh bien, cela se limite à JPG (pour les autres formats, vous devrez changer le type mime et le nombre magic ):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Notez que cela a été testé sur les dernières versions de Firefox et Chrome, et sur IExplore 10.

Pour une liste complète des types MIME, voir Wikipedia .

Pour une liste complète des nombres magiques, voir Wikipedia .

1
lmiguelmh

Vous devez utiliser un des plugins qui utilise Flash intégré, car vous ne pouvez pas le faire avec du javascript simple.

0
fantactuka

J'ai créé un moyen simple de validation côté client dans la plupart des cas de filtrage de fichiers. C'est en fait assez simple. Maintenant, avant de tenter d'implémenter ceci, sachez que le serveur DOIT vérifier ce fichier, car le filtrage javascript et HTML n'est pas une chose sûre dans les cas où quelqu'un altère le .js, voire le HTML. Je n’inclus pas tout le script pour le simple fait que j’aime voir d’autres implémenter les concepts avec un esprit créatif, mais ce sont les mesures que j’ai prises qui semblent fonctionner jusqu’à ce que je trouve une meilleure réponse:

Créez un objet js qui trouve l’entrée et la gère.

Appelez une fonction, telle que OnClientUploadComplete pour le contrôle AsyncFileUpload d'AjaxControlToolKit. 

À l'intérieur de cette fonction, déclarez une variable booléenne: bIsAccepted (définie sur false) et la chaîne sFileName (après avoir obtenu le nom du fichier à partir des arguments).

Dans une autre déclaration, 

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

puis 

if(bIsAccepted)
{
//Process Data
}

Sur le serveur, la création d’une liste d’extensions de fichiers acceptées, ainsi que la lecture en boucle et le traitement rendront le processus cohérent et cohérent, permettant ainsi à l’UI et à Code -hind de filtrer les types de fichiers dans presque toutes les situations. 

Etant donné que cela peut être contourné en modifiant le nom pour lui associer une extension de fichier différente, le type mime doit également être vérifié avant de le soumettre au serveur pour traitement ultérieur. 

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

J'espère que cela t'aides!

0
Brett Weber