Привет, коллеги-программисты! Сегодня мы собираемся погрузиться в чудесный мир загрузки файлов и научиться ограничивать типы файлов только PDF. Так что хватайте шляпы программиста и начнем!

Когда дело доходит до загрузки файлов в HTML, элемент <input type="file"> — наш незаменимый инструмент. Чтобы ограничить типы файлов PDF, мы можем использовать атрибут accept. Этот атрибут позволяет нам указать типы файлов, которые может выбрать пользователь. Давайте рассмотрим несколько различных способов достижения этой цели.

Метод 1: использование типа MIME

<input type="file" accept="application/pdf">

В этом методе мы устанавливаем атрибут acceptв значение "application/pdf". Это ограничивает выбор файлов только файлами PDF. Однако важно отметить, что этот метод основан на способности браузера правильно интерпретировать типы MIME.

Метод 2: использование расширения файла

<input type="file" accept=".pdf">

Здесь мы указываем расширение файла непосредственно в атрибуте accept. Точка перед расширением обязательна. Этот метод более надежен, чем предыдущий, поскольку он основан на расширении файла, а не на интерпретации браузером типов MIME.

Метод 3. Принятие нескольких типов файлов

<input type="file" accept=".pdf,.doc,.docx">

Если вы хотите разрешить несколько типов файлов, просто разделите их запятыми в атрибуте accept. В этом примере мы разрешаем файлы PDF, DOC и DOCX. Вы можете добавлять или удалять типы файлов в соответствии с вашими требованиями.

Метод 4. Использование проверки JavaScript

<input type="file" id="fileUpload">
<script>
const fileInput = document.getElementById('fileUpload');
fileInput.addEventListener('change', function() {
  const fileName = this.value;
  const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
  if (fileExtension.toLowerCase() !== 'pdf') {
    alert('Please select a PDF file.');
    this.value = '';
  }
});
</script>

При использовании этого метода мы полагаемся на JavaScript для проверки типа файла после того, как пользователь выбирает файл. Мы извлекаем расширение файла из имени файла и сравниваем его с нужным типом файла. Если он не совпадает, мы показываем предупреждение и очищаем выбор файла.

Не забудьте включить этот код JavaScript в теги <script>или во внешний файл JavaScript.

И вот оно! Мы рассмотрели несколько способов ограничить типы файлов только PDF при загрузке файлов. Не стесняйтесь выбирать метод, который лучше всего соответствует вашим потребностям.