jQuery验证文件上传

Question

我正在尝试使用jQuery Validate验证HTML文件上载

我发现我可以使用meta选项,如:

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

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

但它似乎不起作用.我还是需要添加这个required类.那么文件类型检查当然也不会起作用.我需要做些额外的事情吗？

Answer 1

如果要使用jQuery validate来检查文件的大小,可以通过执行以下操作来执行此操作:

1-加载其他方法文件

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

2-添加自定义方法以验证文件大小

$.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-使用新添加的方法作为验证规则来验证您的输入:

$('#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" }
});

注意:上载具有空白文件类型的文件时,使用"接受"验证规则而不是"扩展名"会导致MIME类型错误消息.

Answer 2

您可以添加验证方法来完成

    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");

并像这样使用它 -

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

我希望这能帮到您..

Answer 3

您是否已阅读并尝试过这种方式：http://docs.jquery.com/Plugins/Validation/Methods/accept#extension？

我的意思是，您没有尝试立即将它们添加到验证初始化中，而不是将验证规则添加到类中？