在jquery验证插件中提交表单之前，如何检查输入类型=“ file”的验证？

Question

Here is the complete code for the image validation using jquery validation plugin. dimension and filesize is not the method of jquery validation plugin. those methods are externally added function using jquery validator.addMethod method. This code is use to validate the images which at the user end(Client side). How can i check this image validation for input type file before submit button means when the user select the images then the validation is check the image is valid or not as per rules.

  $('#image_form').validate({ rules: { image: { required: true, extension: "jpg|jpeg", dimension: [300, 300], filesize: 50000 }, }, messages: { filesize: "File is too large", }, submitHandler: function (form) { $('.spinner') .css("display", "block"); form.submit(); } }); $.validator.addMethod('filesize', function (value, element, arg) { var minsize = 0; if ((element.files[0].size > minsize) && (element.files[0].size <= arg)) { return true; } else { return false; } }, "File size must be less than 500KB."); //check image height and witdh at client side $.validator.addMethod('dimension', function (value, element, param) { if (element.files.length == 0) { return true; } var width = $(element) .data('imageWidth'); var height = $(element) .data('imageHeight'); if (width < param[0] && height < param[1]) { return true; } else { return false; } }, 'File resolution should be in 300X300.'); //remove the image attribute height and width $('#input-file-now') .change(function () { $('#input-file-now') .removeData('imageWidth'); $('#input-file-now') .removeData('imageHeight'); var file = this.files[0]; var tmpImg = new Image(); tmpImg.src = window.URL.createObjectURL(file); tmpImg.onload = function () { width = tmpImg.naturalWidth, height = tmpImg.naturalHeight; console.log(width); $('#input-file-now') .data('imageWidth', width); $('#input-file-now') .data('imageHeight', height); } }); 

 <form method="post" action="upload.php" id="image_form" enctype="multipart/form-data"> <input id="input-file-now" name="image" class="file-img" type="file"> <label id="custom_error" style="display:none;color:red">File resolution should be in 300X300.</label> <button type="submit" class="btn btn-default btn1_sign ">Submit</button> </form> 

Answer 1

In my case: once the user selected a file; I verify the file format and file size. If it is not ok the input file will be null.

See the following code

 function fileIsValid(fileName) { var ext = fileName.match(/\\.([^\\.]+)$/)[1]; ext = ext.toLowerCase(); var isValid = true; switch(ext) { case 'png': case 'jpeg': case 'jpg': case 'tiff': case 'gif': case 'tif': case 'pdf': break; default: this.value=''; isValid = false; } return isValid; } function VerifyFileNameAndFileSize(){ var file = document.getElementById('GetFile').files[0]; if(file != null){ var fileName = file.name; if(fileIsValid(fileName) == false){ alert('error->format'); document.getElementById('GetFile').value = null; return false; } var content; var size = file.size; if( (size != null) && ((size/(1024*1024)) > 3)){ alert('size'); document.getElementById('GetFile').value = null; return false; } return true; } else return false; } 

 <input type="file" id="GetFile" onchange="VerifyFileNameAndFileSize();" accept=".pdf,.png,.gif,.jpeg,.tiff,.jpg"/>