Як зробити <input type = "file" /> приймати тільки ці типи?

Я хочу, щоб моїм завантажувачем дозволили лише такі типи:

  • doc, docx
  • xls, xlsx
  • ppt, pptx
  • txt
  • pdf
  • Типи зображень

Як це можна досягти? Що потрібно вставити в атрибут accept ? Спасибі за вашу допомогу.

РЕДАКТИ !!!

У мене ще одна справа, щоб запитати. Коли з'являється спливаюче вікно для вибору файлу, у нижньому правому куті є випадаючий список, що містить усі дозволені файли. У моєму випадку цей список буде тривалим. Я бачу в списку, є варіант під назвою Усі підтримувані типи . Як я можу зробити його обраним за замовчуванням і виключити всі інші параметри?

Будь-яка допомога буде оцінена. Дякую.

36
додано Автор Martin Thoma, джерело
додано Автор Martin Thoma, джерело
Що стосується вашого 2-го запитання: "Атрибут accept не перевіряє типи вибраних файлів, він просто наводить підказки для веб-переглядачів, щоб керувати користувачами у виборі правильних типів файлів. У більшості випадків користувачі можуть перемикати параметр у виборі файлів, який дає змогу переопределити це і вибрати будь-який бажаний файл, а потім вибрати неправильні типи файлів. Через це ви повинні переконатися, що атрибут accept підтримується відповідною перевіркою на стороні сервера. " developer.mozilla.org/en-US/docs/ Веб/HTML/елемент/введення/файл
додано Автор Cody, джерело
Що стосується вашого 2-го запитання: "Атрибут accept не перевіряє типи вибраних файлів, він просто наводить підказки для веб-переглядачів, щоб керувати користувачами у виборі правильних типів файлів. У більшості випадків користувачі можуть перемикати параметр у виборі файлів, який дає змогу переопределити це і вибрати будь-який бажаний файл, а потім вибрати неправильні типи файлів. Через це ви повинні переконатися, що атрибут accept підтримується відповідною перевіркою на стороні сервера. " developer.mozilla.org/en-US/docs/ Веб/HTML/елемент/введення/файл
додано Автор Cody, джерело
Чи допоможе це? stackoverflow.com/questions/11601342/ … Не впевнений, що підтримуються типи MIME типу "application/doc", "application/pdf" та "application/ppt".
додано Автор Neigyl R. Noval, джерело

9 Відповіді

Значення атрибута 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/*">

якщо я правильно розумію цілі. Остерігайтеся, що веб-переглядачі можуть не розпізнавати назви типів носіїв точно, як це вказано в авторитетному реєстрі, тому деякі тестування потрібні.

66
додано
Це не спрацює, якщо ваш файл doc зроблено з програмним забезпеченням ubuntu.
додано Автор Shabbir Dhangot, джерело
Додайте підтримку для docx, xlsx та pptx: application/vnd.openxmlformats-officedocument.wordprocessing & zwnj; ml.document, application/vnd.openxmlformats-officedocument.spreadsheetml. & Zwnj; sheet, application/vnd.openxmlformats-officedocument.presentationml & zwnj; .Slideshow
додано Автор charles.art.br, джерело
@Jukka K. Korpela, що фільтр отримує мені всі файли офісів, які я хочу, дякую
додано Автор pavan kumar, джерело
Можливо це було правдою в 2014 році, коли дана відповідь, але я можу підтвердити, що список розширень, розділених комами, працює належним чином у Firefox.
додано Автор Joe Firebaugh, джерело

Використовуйте як нижче

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />
41
додано
Браузери, як правило, не перевіряють вміст файлу, тому розширення є в порядку - це навіть підходить, оскільки веб-переглядачі не знають усіх типів MIME .. Ви повинні самостійно перевірити вміст файлу.
додано Автор luxigo, джерело

Використовуйте атрибут accept з значеннями MIME_type як

<input type="file" accept="image/gif, image/jpeg" />
10
додано
Вказаний код приймає тільки файли GIF та JPEG, на відміну від того, що було запропоновано для запитання.
додано Автор Jukka K. Korpela, джерело
@ JukkaK.Korpela, це лише приклад коду, і ви можете встановити атрибут accept з значеннями MIME_type як значення
додано Автор Chamika Sandamal, джерело

Використовуйте атрибут accept з значеннями MIME_type як

<input type="file" accept="image/gif, image/jpeg" />
10
додано
Вказаний код приймає тільки файли GIF та JPEG, на відміну від того, що було запропоновано для запитання.
додано Автор Jukka K. Korpela, джерело
@ JukkaK.Korpela, це лише приклад коду, і ви можете встановити атрибут accept з значеннями MIME_type як значення
додано Автор Chamika Sandamal, джерело

для файлів 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
додано

ВАЖЛИВО ДОПОВНЕННЯ:

Завдяки використанню лише програми/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 у вашому файлі таким чином (помилую lang) (у типів списку MIME це не так):

enter image description here

You can select & copy the type of content

3
додано

Оскільки вказано в w3schools :

audio/* - всі звукові файли приймаються

     

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

     

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

     

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

2
додано
w3schools FTL = Для вільного
додано Автор Mateus Leon, джерело

Оскільки вказано в w3schools :

audio/* - всі звукові файли приймаються

     

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

     

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

     

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

2
додано
w3schools FTL = Для вільного
додано Автор Mateus Leon, джерело

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

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

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

0
додано
Даний код приймає тільки файли зображень, на відміну від того, що було запропоновано для запитання.
додано Автор Jukka K. Korpela, джерело