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

Posted 2023-05-08

【中文标题】验证不适用于引导文件上传

【英文标题】：Validation is not working proper for bootstrap file upload

【发布时间】：2017-12-05 20:35:56

【问题描述】：

我正在使用引导文件样式。我已经设置了 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>

【参考方案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 和相同的格式。希望这可以解决您的问题。

【讨论】：

酷！我会检查并尽快回复您

抱歉回复晚了，盒马我试过你的代码，但验证不能正常工作。我需要唯一的 jpg、png、gif。我在您的代码中上传了 doc 文件并被接受。