web-dev-qa-db-fra.com

jQuery - INPUT type = File, Image FileType Validation options?

J'ai ce qui suit:

<input id="user_profile_pic" name="user[profile_pic]" type="file">

Sur le serveur, je vérifie que c'est une image, mais je veux d'abord vérifier sur le côté client.

Comment avec jQuery puis-je alerter l'utilisateur si le fichier d'entrée sélectionné n'est pas un gif, jpg, png ou bmp?

Merci

jqueryjquery-plugins
16
AnApprentice

Vous voulez vérifier quelle est la valeur de l'élément, quelque chose comme:

$("#user_profile_pic").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("not an image");
            break;
    }
});

Modifier

Le code a été modifié en fonction du commentaire - supprime désormais la valeur du fichier sélectionné s'il ne s'agit pas d'une image.

28
Jess Telford

C'est assez simple, aucune validation JavaScript n'est nécessaire. Écrivez simplement ceci et il n'acceptera que les fichiers image.

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

Vous pouvez utiliser une expression régulière:

var val = $("#user_profile_pic").val();
if (!val.match(/(?:gif|jpg|png|bmp)$/)) {
    // inputted file path is not an image of one of the above types
    alert("inputted file path is not an image!");
}

Bien sûr, vous pouvez ajouter plus de formats à l'expression régulière. Il existe des moyens plus complexes et plus complets pour y parvenir, mais cette méthode accomplira la tâche tant que le chemin d'accès au fichier image entré se termine par une extension de fichier image standard.

7
Alex

Vous pouvez essayer comme ça

// Image upload validation
$(document).on('change', ':file',function () {
    const file = this.files[0];
    const fileType = file['type'];
    const validImageTypes = ['image/jpeg', 'image/png'];
    if (!validImageTypes.includes(fileType)) {
        alert('Only JPEG and PNG file types are allowed');
        this.value = '';
    }
});
1
Bablu Ahmed

Il peut y avoir des navigateurs qui vous permettent de créer un <img/> du chemin donné, vous pouvez vérifier si c'est une image réelle ou non (sinon l'événement onerror devrait se déclencher sur l'image et il aura une largeur/hauteur de 0).

Mais comme cela ne fonctionne que dans certains navigateurs et constitue un risque pour la sécurité (dans mon esprit), je ne suggérerais pas de le faire, donc ma réponse est: vous ne pouvez rien y valider.

Vérifier les extensions de fichier comme suggéré par Alex peut être une option, mais l'extension de fichier ne garantit pas s'il s'agit d'une image. Cependant, comme une simple pré-vérification (pas de validation), cela pourrait être utile.

1
Dr.Molle

Comment vérifier que cet utilisateur sélectionne le fichier image?

  • Par validation d'extension de fichier
    Il fonctionne comme prévu, fichier texte avec .png extension pass ici
  • input[type=file][accept=image/*] Il cache initialement non-image fichiers de l'utilisateur. Mais ce filtre fonctionne également par extensions. Et l'utilisateur peut toujours saisir manuellement n'importe quel nom de fichier existant.

  • Nous pouvons vérifier le type de résultat mime dataUrl, il commence par data:mimetype;base64,.... Donc nous avons besoin image/* mimetype.

    var file = $('#uploadfile');
file.on('change', function (e) {
    var reader = new FileReader();

    reader.onload = function() {
        var data = reader.result;
        if (data.match(/^data:image\//)) {
            $('#thumbnail').attr('src', data);
        } else {
            console.error('Not an image');
        }
    };

    reader.readAsDataURL(file.prop('files')[0]);
});
1
vp_arth