验证不适用于引导文件上传

Question

我正在使用引导文件样式。我已经设置了 Jquery 验证，它正在工作，但我不知道我的代码中有什么问题。我正在上传图片 jpg、png、jpeg、gif，但上传图片后验证仍然显示错误。

我的意思是我无法上传图片，因为我收到验证错误，但我使用的是正确的图片。我正在上传 jpg 图片，但仍然显示错误 "File must be JPG, GIF or PNG"。你会在这方面帮助我吗？

$(":file").filestyle({buttonBefore: true,buttonText: "Upload Image"});
	
	     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(250)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


	 $(function() {
  $("form[name='registration']").validate({

    // Specify the validation rules
    rules: {
      fileToUpload: {
        required: true,
        accept: "png|jpe?g|gif"
      }
    },
    // Specify the validation error messages
    messages: {
      fileToUpload: {
        required: "Please upload  image",
        accept: "File must be JPG, GIF or PNG"
      }
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/1.2.1/bootstrap-filestyle.min.js"></script>


<form name="registration" method="post" action="process.php">
<input type='file' onchange="readURL(this);" class="filestyle input-field" data-buttonBefore="true" data-buttonText="Upload Image" name="fileToUpload" id="fileToUpload" />

  <input type="submit" name="submit" value="submit">
</form>

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-filestyle/1.2.1/bootstrap-filestyle.min.js"></script>


<form name="registration" method="post" action="process.php">
<input type='file' onchange="readURL(this);" class="filestyle input-field" data-buttonBefore="true" data-buttonText="Upload Image" name="fileToUpload" id="fileToUpload" />

  <input type="submit" name="submit" value="submit">
</form>
<script>

$(":file").filestyle({buttonBefore: true,buttonText: "Upload Image"});
	
	     function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)
                        .width(250)
                        .height(200);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


	 $(function() {
	 //console.log(validate())
	
  $("form[name='registration']").validate({

    // Specify the validation rules
    rules: {
      fileToUpload: {
        required: true,
        accept: "*.PNG|*.jpe?g|*.GIF|*.png|*.JPE?G|*.gif"
      }
	 
    },
    // Specify the validation error messages
    messages: {
      fileToUpload: {
        required: "Please upload  image",
        accept: "File must be JPG, GIF or PNG"
      }
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
  
});
</script>

尝试在规则中为其他格式提供 *.png 和相同的格式。希望这可以解决您的问题。