Проверка не работает должным образом для загрузки файла начальной загрузки

Я использую стиль файла начальной загрузки. Я установил на нем проверку 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>


validation html jquery twitter-bootstrap bootstrap-file-upload
person Naren Verma    schedule 02.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

<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 и то же самое для других форматов в правилах. Надеюсь, это решит вашу проблему.

person Hema Nandagopal    schedule 26.07.2017
comment
Прохладный! Я проверю это и отвечу вам в ближайшее время - person Naren Verma; 26.07.2017
comment
Извините за поздний ответ, Хема, я попробовал ваш код, но проверка не работает должным образом. Мне нужны только jpg, png, gif. Я загрузил файл документа в ваш код, и он был принят. - person Naren Verma; 17.08.2017