Valider l'extension de fichier et la taille avant de soumettre le formulaire

Je suis valider à l'aide de jQuery plugin, et que vous voulez valider l'extension de fichier et la taille du fichier avant de soumettre un formulaire.

"use strict";
$('#update_profile').validate({
    rules: {
        FirstName: {
            required: true,
            maxlength: 20
        },
        image: {
            required: true,
            extension: "jep | jpeg",
            filesize : 50000,
        }
    }
});

Je veux un code similaire à ci-dessus.

InformationsquelleAutor Mahesh Jagdale | 2015-10-13

jquery jquery-validate

Vous avez besoin d'écrire une règle personnalisée pour valider la taille du fichier, également les extensions de fichier doit être passé comme une chaîne séparée par des virgules

JS:

$.validator.addMethod('filesize', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');

jQuery(function ($) {
    "use strict";
    $('#update_profile').validate({
        rules: {
            FirstName: {
                required: true,
                maxlength: 20
            },
            image: {
                required: true,
                extension: "jpg,jpeg",
                filesize: 5,
            }
        },
    });
});

HTML:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="update_profile" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Save" />
</form>

jsfiddle.net/arunpjohny/rj5a8h0q
Grâce Arun ...tout fonctionne bien...
Quelle est la "cette.en option(élément)" partie faire?
si la valeur n'est pas nécessaire et qu'elle est vide, alors il retournera true
Le pipe "|" est valide d'un séparateur selon la documentation, mais il ne peut tout simplement pas y avoir d'espaces: jqueryvalidation.org/extension-method
Arun peut-on ajouter des min et max de la taille et si nous supprimons les champs requis puis sa ne fonctionne pas.aucune idée

InformationsquelleAutor Arun P Johny

$.validator.addMethod('filesize', function (value, element, arg) {
            var minsize=1000; //min 1kb
            if((value>minsize)&&(value<=arg)){
                return true;
            }else{
                return false;
            }
        });

        $("#myform" ).validate({
            rules: {
                file_upload:{
                    required:true,
                    accept:"application/pdf,image/jpeg,image/png",
                    filesize: 200000   //max size 200 kb
                }
            },messages: {
                file_upload:{
                    filesize:" file size must be less than 200 KB.",
                    accept:"Please upload .jpg or .png or .pdf file of notice.",
                    required:"Please upload file."
                }
            },
            submitHandler: function(form) {
                form.submit();
            }
        });

Min 1 ko max 200 ko taille du fichier et il est testé

InformationsquelleAutor Mahesh Lad

JS:

$.validator.addMethod('filesize', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param)
}, 'File size must be less than {0}');

jQuery(function ($) {
    "use strict";
    $('#update_profile').validate({
        rules: {
            FirstName: {
                required: true,
                maxlength: 20
            },
            image: {
                required: true,
                extension: "jpg,jpeg",
                filesize: 5,
            }
        },
    });
});

HTML:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="update_profile" method="post" action="">
  <input type="file" name="image" />
  <input type="submit" value="Save" />
</form>

Salut @AlaaMoneam, Il ne fonctionne pas parfaitement. J'ai ajouté une image qui est à moins de 100ko puis j'ai eu un message d'erreur "la taille du Fichier doit être inférieure à 5". après cela, j'ai ajouté une image de plus de 5 MO également que j'ai une erreur "la taille du Fichier doit être inférieure à 5". Même j'ai essayé 1 mo image mais toujours même problème.

InformationsquelleAutor Alaa Moneam

Si vous utilisez additional-methods.js, vous pouvez le faire comme ceci:

$('#update_profile').validate({
    rules: {
        FirstName: {
            required: true,
            maxlength: 20
        },
        image: {
            required: true,
            extension: "jep | jpeg",
            maxsize: 50000,
        }
    }
});

InformationsquelleAutor johannes

-1

 HTML
<div class="col-sm-9 col-lg-6 col-xs-12 col-md-9">
<div class="input-group">
<input type="text" class="form-control"  name="uploadFile"  readonly id="uploadFile">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse&hellip;  <input type="file" id="uploadFile" name="uploadFile" >         
</span>
</span>
</div>
<div id="spanUploadFile">
//Message will display here
</div>
</div>
JQuery
$(document).on('change', '.btn-file :file', function() {
var input = $(this),numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
var msg = "spanUploadFile";
input.trigger('fileselect', [numFiles, label]);
genrateFileMsg(this.id, msg)
genrateSizeMsg(this.files[0], msg)
});
function genrateFileMsg(id, nId)
{
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
var fileExtensionDOB = ['pdf'];
//var fileExtensionDOB = ['pdf', 'doc', 'docx', 'txt', ];
if ($.inArray($("#" + id).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
$("#" + nId).html("Only files of type jpg, png, gif, jpeg is allowed");
return false;
}
return true
}
function genrateSizeMsg(f, nId)
{
var f = f.size;
f = f / 1024;
if (f > 100)
{
$("#" + nId).html("The file you are trying to upload is too large (max 100KB)");
return false;
}
return true;
}

Il est logique de ne pas prédéfini code.
la logique définie dans genrateFileMsg méthode ainsi que genrateSizeMsg méthode ci-dessus jquery.

InformationsquelleAutor Ravindra Bohra

Vous devez vous connecter pour publier un commentaire.