jQuery - INPUT type=Fichier , Type de fichier Image les options de Validation?

J'ai le texte suivant:

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

Sur le serveur j'ai assurez-vous que c'est une image, mais je veux vérifier sur le côté client d'abord.

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

Grâce

InformationsquelleAutor AnApprentice | 2010-11-19
  1. 28

    Vous voulez vérifier ce que la valeur de l'élément est, quelque chose le long des lignes de:

    $("#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

    Code modifié en fonction des commentaires - maintenant, supprime la valeur du fichier sélectionné si ce n'est une image.

    • Uncaught TypeError: Object #<un Objet> n'a pas de méthode 'onchange'
    • .changer de travail. Mais c'est toujours pas bon, alors il erreurs, elle est encore à sélectionne et affiche le fichier sur la page.
    • L'ajout de ce travail, ".val(");" mais je ne sais pas comment conformité qui est... quelqu'un?
    • .val("); c'est un jQuery appel, et il n'est de définir la valeur de l'attribut de l'élément à être " - qui est la même chose s'était au chargement de la page.
    • Pour les googlers; autant que je sache, tous les navigateurs vous permettent de réinitialiser un fichier d'entrée de la valeur. Le plus élégant crossbrowser solution que j'ai trouvé est element.wrap('<form>').closest('form').get(0).reset(); element.unwrap();
    InformationsquelleAutor Jess Telford
  2. 9

    C'est assez simple, pas besoin de JavaScript de validation .
    Il suffit d'écrire cela et il va accepter uniquement les fichiers d'image.

     <input type="file" multiple accept='image/*'>
    • c'est cool, mais il ne fonctionne pas comme une validation!!! c'est juste pour faciliter la manipulation pour sélectionner une image à partir d'un dossier avec une extension différente. comme vous pouvez le voir ici -> imageshack.us/a/img20/8451/switchzz.jpg
    • Une définition dans le code HTML peut être remplacée dans certains navigateurs, en choisissant l'option "tous les fichiers" dans la boîte de dialogue de fichier. De deux, même s'il en lui-même n'est pas 100% infaillible, de valider avec le javascript est un autre encore ajouté de dissuasion dans la lutte contre les activités malveillantes. En tout, vous voulez avoir votre backend valider avant de les accepter, et comme un bonus supplémentaire par vérifier et valider les premiers octets du fichier à valider c'est un type que vous voulez vraiment, puisque, par extension, à lui seul n'est jamais un infaillible moyen.
    InformationsquelleAutor Hardik Sondagar
  3. 7

    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 plusieurs formats de l'expression régulière. Il y a de plus complexe et complète de façons de le faire, mais cette méthode permettra d'accomplir la tâche tant que le chemin du fichier image saisie se termine par une image standard de l'extension de fichier.

    • Que faire si il y a trois fichiers d'entrée et je veux valider un par un? var val1=..., var val2=... var val3 =... if (!val.match(/(?:gif|jpg|png|bmp)$/)) {
    InformationsquelleAutor Alex
  4. 1

    Il y a peut être des navigateurs qui vous permettent de créer un <img/> du chemin d'accès donné, que l'on pourrait vérifier si il est une image réelle ou pas(si ce n'est le onerror événement doit se déclencher sur l'image et il aura une largeur/hauteur de 0).

    Mais comme cela ne fonctionne que dans certains navigateurs et est un de sécurité-risque(dans mon esprit) je voudrais pas suggérer de le faire, donc ma réponse est: vous ne pouvez pas valider il y a quoi que ce soit.

    Vérification du fichier de l'extension comme suggéré par Alex peut être une option, mais l'extension de fichier ne garantit pas si c'est une image. Cependant, comme un simple pré-enregistrement(pas de validation), il pourrait être utile.

    InformationsquelleAutor Dr.Molle
  5. 1

    Comment peut-on vérifier que l'utilisateur sélectionne le fichier d'image?

    • Par l'extension de fichier de validation

      C'est un travail comme prévu, un fichier texte avec .png extension de passer ici
    • input[type=file][accept=image/*]
      Au départ, il se cache non-image fichiers de l'utilisateur. Mais ce filtre fonctionne par des extensions de trop. Et l'utilisateur peut également entrer manuellement tout nom de fichier existant.

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

      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]);
});
    InformationsquelleAutor vp_arth
  6. 1

    Vous pouvez essayer comme ceci

    //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 = '';
    }
});
    InformationsquelleAutor Bablu Ahmed