web-dev-qa-db-fra.com

jQuery Validate File Upload

J'essaie de valider un téléchargement de fichier HTML à l'aide de jQuery Validate

J'ai trouvé que je peux utiliser l'option méta comme:

$("#myform").validate({
   meta: "validate"
})

<input type="file" name="upload" class="{validate:{required:true,accept:'docx?|pdf'}}" />

Mais cela ne semble pas fonctionner. J'ai quand même besoin d'ajouter la classe required. Bien sûr, la vérification du type de fichier ne fonctionnera pas trop. Dois-je faire quelque chose de plus?

jqueryjquery-validate
27
JM at Work

Si vous souhaitez utiliser le validate de jQuery pour vérifier la taille du fichier, vous pouvez le faire en procédant comme suit:

1- Charger le fichier des méthodes supplémentaires

<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>

2- ajouter une méthode personnalisée pour valider la taille du fichier

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (in bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

3- Utilisez la méthode nouvellement ajoutée comme règle de validation pour valider votre saisie:

$('#formid').validate({
    rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});

Remarque: l'utilisation de la règle de validation "accepter" au lieu de "extension" entraîne des messages d'erreur de type MIME lorsque vous téléchargez un fichier avec un type de fichier vide.

65
Naoise Golden

Vous pouvez ajouter une méthode de validation pour accomplir

    jQuery.validator.addMethod("uploadFile", function (val, element) {

          var size = element.files[0].size;
            console.log(size);

           if (size > 1048576)// checks the file more than 1 MB
           {
               console.log("returning false");
                return false;
           } else {
               console.log("returning true");
               return true;
           }

      }, "File type error");

Et utilisez-le comme ça -

      $(document).ready(function(){
              $('#quote_form').validate({
      rules: {
           image: {
              required: true,
              extension:'jpe?g,png',
              uploadFile:true,
              }
             }
          });
       });

J'espère que cela t'aidera..

9
PHPCoder

L'avez-vous lu et essayé de cette façon: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension ?

Je veux dire, plutôt que d'ajouter les règles de validation à la classe, avez-vous essayé de les ajouter instantanément dans validate init?

2
Pehmolelu