Comment faire en sorte que jQuery limite les types de fichiers lors du téléchargement ?

Question

J'aimerais que jQuery limite un champ de téléchargement de fichiers aux seuls formats jpg/jpeg, png et gif. Je fais une vérification en arrière-plan avec PHP déjà. Je fais passer mon bouton d'envoi par un JavaScript J'ai donc juste besoin de savoir comment vérifier les types de fichiers avant l'envoi ou l'alerte.

Answer 1

Vous pouvez obtenir la valeur d'un champ de fichier de la même manière que n'importe quel autre champ. En revanche, vous ne pouvez pas la modifier.

Ainsi, pour superficiellement vérifier si un fichier a la bonne extension, vous pouvez faire quelque chose comme ceci :

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Answer 2

Aucun plugin n'est nécessaire pour cette tâche. Je l'ai assemblé à partir de quelques autres scripts :

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

L'astuce consiste à désactiver le bouton de téléchargement jusqu'à ce qu'un type de fichier valide soit sélectionné.

Answer 3

Vous pouvez utiliser le plugin de validation pour jQuery : http://docs.jquery.com/Plugins/Validation

Il se trouve qu'il a une règle accept() qui fait exactement ce dont vous avez besoin : http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Notez que le contrôle de l'extension de fichier n'est pas infaillible car il n'est en aucun cas lié au mimetype du fichier. Vous pouvez donc avoir un .png qui est un document Word et un .doc qui est une image png parfaitement valide. N'oubliez donc pas d'ajouter des contrôles côté serveur ;)

Answer 4

Vous ne voulez pas vérifier plutôt sur MIME que sur n'importe quelle extension de l'utilisateur ? Si c'est le cas, c'est moins d'une ligne :

<input type="file" id="userfile" accept="image/*|video/*" required />

Answer 5

Pour mon cas, j'ai utilisé les codes suivants :

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }