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

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和其他格式相同，希望這可以解決您的問題。