驗證不適用於引導文件上傳

Question

我正在使用引導文件樣式。我已經設置了Jquery驗證它正在工作，但我不知道我的代碼中存在什麼問題。我上傳圖像jpg，png，jpeg，gif，但驗證在上傳圖像後仍然顯示錯誤。

我的意思是我不能上傳圖像，因爲我得到驗證錯誤，但我使用正確的圖像。我正在上傳jpg圖片，但仍顯示錯誤"File must be JPG, GIF or PNG"。你能幫我嗎？

$(":file").filestyle({buttonBefore: true,buttonText: "Upload Image"}); 
 
\t 
 
\t  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]); 
 
      } 
 
     } 
 

 

 
\t $(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"}); 
 
\t 
 
\t  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]); 
 
      } 
 
     } 
 

 

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

 
    // Specify the validation rules 
 
    rules: { 
 
     fileToUpload: { 
 
     required: true, 
 
     accept: "*.PNG|*.jpe?g|*.GIF|*.png|*.JPE?G|*.gif" 
 
     } 
 
\t 
 
    }, 
 
    // 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和同爲其他格式的rules.Hope解決您的問題。