Привет ребята,

В этом посте я научу вас, как проверить тип загружаемого файла с помощью javascript. Используя этот пост, мы можем легко проверить выбранное расширение файла с разрешенными расширениями файлов, и мы можем запретить пользователю загружать только разрешенные типы файлов.

laravel также обеспечивает проверку типа файла в контроллере, но это только на стороне сервера, это означает, что мы можем получить сообщение проверки после отправки формы, здесь я приведу пример проверки типа файла перед отправкой данных в форму с использованием javascript. В настоящее время мы проверяем только определенные расширения файлов, такие как «.txt», «.csv» и т. д., или вы можете использовать все типы файлов, такие как «image/*».

В этом примере я проверю тип файла, используя событие изменения, и получу значение файла типа ввода. После этого мы получим расширение с помощью функций split() и pop().

Затем мы проверим, есть ли еще условие. если оба одинаковы, то нечего отображать сообщение об ошибке, иначе отображать сообщение об ошибке с помощью javascript.

Итак, скопируйте приведенный ниже код и получите вывод, как мы обсуждали.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload type validation in javascript - websolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
  <h3 style="text-align: center;">File upload type validation in javascript - websolutionstuff.com</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="filesizecheck"><br>
  <span id="error-message" class="validation-error-label"></span>
  </div>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    $('#filesizecheck').on('change',function(){
      myfiles = $(this).val();
      var ext = myfiles.split('.').pop();
      if(ext == "txt" || ext == "png"){
        $('#error-message').css("display","none");
      }else{
        $('#error-message').html("Only allow valid file inputs.");
        $('#error-message').css("display","block");
        $('#error-message').css("color","red");
      }
    });
  });
</script>

И вы получите вывод, как показано ниже.

Читайте также: Как проверить максимальный размер файла с помощью JavaScript