ブートストラップファイルのアップロードで検証が正しく機能しない

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>

これはあなたの問題を解決rules.Hopeに他のフォーマットのための.pngと同じ*与えてみてください。