Как сделать <input type="file"/"> принимать только эти типы?

Я хочу, чтобы мой загрузчик разрешал только эти типы:

  • doc, docx.
  • xls, xlsx.
  • ppt, pptx.
  • TXT.
  • PDF.
  • Типы изображений.

Как я могу это достичь? Что я должен добавить в атрибут accept? Благодарим за помощь.

ИЗМЕНИТЬ!!!

У меня есть еще одна вещь, чтобы спросить. Когда всплывающее окно появляется для использования для выбора файла, в правом нижнем углу находится раскрывающийся список, содержащий все разрешенные файлы. В моем случае список будет длинным. Я вижу в списке, есть опция All Supported Types. Как я могу сделать его выбранным по умолчанию и устранить все остальные параметры?

Любая помощь будет оценена. Спасибо.

Ответы

Ответ 1

Значением атрибута accept является, как и HTML5 LC, список элементов, разделенных запятыми, каждый из которых является определенным типом носителя, например image/gif или обозначение типа image/*, которое относится ко всем типам image или расширению имени файла, например .gif. IE 10+ и Chrome поддерживают все эти функции, тогда как Firefox не поддерживает расширения. Таким образом, самым безопасным способом является использование типов мультимедиа и обозначений типа image/*, в этом случае

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*">

если я правильно понимаю намерения. Помните, что браузеры могут не распознавать имена типов носителей точно так, как указано в авторитетном реестре, поэтому необходимо провести некоторое тестирование.

Ответ 2

Использование Как ниже

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />

Ответ 3

Использовать атрибут accept с MIME_type как значения

<input type="file" accept="image/gif, image/jpeg" />

Ответ 4

для файлов PowerPoint и PDF:

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>

Ответ 5

Как указано в w3schools:

audio/* - Все звуковые файлы принимаются

video/* - Все видеофайлы принимаются

image/* - Все файлы изображений принимаются

MIME_type - действительный тип MIME без параметров. Посмотрите на IANA MIME типы для полного списка стандартных типов MIME

Ответ 6

ВАЖНОЕ ОБНОВЛЕНИЕ:

Из-за использования только приложения /msword, application/vnd.ms-excel, application/vnd.ms-powerpoint... допускается только до 2003 г. MS-продуктов, а не новее. Я нашел это:

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

И это включает новые. Для других файлов вы можете получить MIME TYPE в своем файле таким образом (pardon the lang) (в типах списка MIME их нет):

введите описание изображения здесь

Вы можете выбрать и скопировать тип контента

Ответ 7

для изображения напишите это

<input type=file accept="image/*">

Для других, Вы можете использовать атрибут accept в своей форме, чтобы предлагать браузеру ограничить определенные типы. Тем не менее, вы захотите повторно проверить свой серверный код, чтобы убедиться. Никогда не доверяйте тому, что клиент отправляет вам.