HTML: Фильтр файлов по расширению в input file

Атрибут accept в <input type="file"> устанавливает фильтр на типы файлов в окне выбора файла. В качестве значения может использоваться разрешение файлов или их MIME-типы (например: image/jpeg).

Одно расширение

Выбор только файлов PNG:

<form action="" method="post" enctype="multipart/form-data">
    <label>Файл PNG:</label>
    <input type="file" name="file" accept=".png">
</form>

Несколько расширений

Выбор только файлов JPG, JPEG, PNG:

<form action="" method="post" enctype="multipart/form-data">
    <label>Файл JPG или PNG:</label>
    <input type="file" name="file" accept=".jpg,.jpeg,.png">
</form>

Выбор по MIME-типу

Так как у файлов с одним MIME-типом может быть множество расширений, то проще сделать фильтровку по нему, например text/plain.

<form action="" method="post" enctype="multipart/form-data">
    <label>Текстовые файлы:</label>
    <input type="file" name="file" accept="text/plain">
</form>

Группы файлов

В HTML5 допустимо указывать группу файлов:

• audio/* – любые аудио файлы;
• video/* – любые видеофайлы;
• image/* – любые графические файлы.

<form action="" method="post" enctype="multipart/form-data">
    <label>Графические файлы:</label>
    <input type="file" name="file-1" accept="image/*">

    <label>Аудио и видео файлы:</label>
    <input type="file" name="file-2" accept="audio/*,video/*">
</form>