Comment filtrer la boîte de dialogue input type="file" par type de fichier spécifique?

Question

Je veux limiter le navigateur aux fichiers JPG lorsque je clique sur le bouton de parcourir du .

Est-il possible de parcourir des types de fichiers spécifiques?

Answer 1

Cela donnera le filtre correct (personnalisé) lorsque la boîte de dialogue de fichier est affichée :

Answer 2

Consultez http://www.w3schools.com/tags/att_input_accept.asp:

L'attribut accept est pris en charge par tous les principaux navigateurs, sauf Internet Explorer et Safari. Définition et utilisation

L'attribut accept spécifie les types de fichiers que le serveur accepte (qui peuvent être soumis via un téléchargement de fichier).

Note : L'attribut accept ne peut être utilisé qu'avec .

Astuce : N'utilisez pas cet attribut comme outil de validation. Les téléchargements de fichiers doivent être validés sur le serveur.

Syntaxe

Astuce : Pour spécifier plus d'une valeur, séparez les valeurs par une virgule (par exemple .

Answer 3

.

$('#btnUpload').click(function () {
    var uploadpath = $('#FileUploadExcel').val();
    var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length);

    if ($('#FileUploadExcel').val().length == 0) {
        // écrire un message d'erreur
        return false;
    }

    if (fileExtension == "xls" || fileExtension == "xlsx") {
        // écrire du code pour le succès
    }
    else {
        // code d'erreur - sélectionnez uniquement des fichiers Excel
        return false;
    }

});

Answer 4

Ajoutez un attribut personnalisé à et lisez les noms de fichiers en javascript qui correspondent à l'extension fournie par l'attribut file-accept. Cela sera un peu bidon, car un fichier texte avec l'une des extensions ci-dessus sera erronément détecté comme une image.

Answer 5

Vous pouvez utiliser l'attribut accept avec le . Cela ne fonctionne pas dans IE et Safari.

En fonction de l'échelle et de l'extensibilité de votre projet, vous pourriez utiliser Struts. Struts offre deux façons de limiter le type de fichier téléversé, de manière déclarative et de manière programmatique.

Pour plus d'informations: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes