Як змусити <input type = “file” /> приймати лише ці типи?

78

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

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

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

РЕДАГУВАТИ !!!

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

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

html file-upload input

— Трієт Доан
джерело

Це допоможе? stackoverflow.com/questions/11601342/… . Не впевнений, чи підтримуються типи mime "application / doc", "application / pdf" та "application / ppt".

— Neigyl R. Noval

1

Можливий дублікат формату файлу Limit при використанні <input type = "file">?

— Martin Thoma

Щодо вашого 2-го запитання: "Атрибут accept не перевіряє типи вибраних файлів; він просто надає підказки для браузерів, щоб направляти користувачів до вибору правильних типів файлів. Користувачі все ще можуть (у більшості випадків) перемикати у засобі вибору файлів, що дозволяє замінити це і вибрати будь-який файл, який вони бажають, а потім вибрати неправильні типи файлів. Через це слід переконатися, що атрибут accept був резервно копійований відповідною валідацією на стороні сервера. " developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

— Коді,

138

Значенням 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/*">

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

— Юкка К. Корпела
джерело

4

Це не буде працювати, якщо ваш файл doc створений за допомогою програмного забезпечення ubuntu.

— Shabbir Dhangot

@Jukka K. Korpela, цей фільтр отримує мені всі потрібні офісні файли, дякую

— pavan kumar

18

Щоб додати зониСкідкі на авіабілетиОтзиви для DOCX, XLSX і PPTX: застосування / vnd.openxmlformats-officedocument.wordprocessingml.document, застосування / vnd.openxmlformats-officedocument.spreadsheetml.sheet, застосування / vnd.openxmlformats-officedocument.presentationml.slideshow

— Чарльз Cavalcante

1

Можливо, це було правдою в 2014 році, коли була дана така відповідь, але я можу підтвердити, що список розширень, розділених комами, працює правильно у Firefox.

— Joe Firebaugh

не спрацював при спробі завантаження з пристрою android / ios. Якщо хтось має рішення, повідомте мене.

— Голді

90

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

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

— Аджит
джерело

1

Браузери зазвичай не перевіряють вміст файлу, тому розширення нормально - навіть переважно, оскільки браузери не знають усіх типів mime-файлів .. Ви повинні перевірити вміст файлу самостійно.

— luxigo

10

Як значення використовуйте атрибут accept з типом MIME_

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

— Самідал Чаміка
джерело

5

Наведений код приймає лише файли GIF та JPEG, на відміну від того, про що запитувалось у питанні.

— Jukka K. Korpela

2

@ JukkaK.Korpela, Це лише зразок коду, і ти можеш встановити acceptатрибут з MIME_types як значення

— Chamika Sandamal

Це все ще представляє опцію "Усі файли".

— DaveB

10

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

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

Ви можете вибрати та скопіювати тип вмісту

— Епістомай
джерело

7

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

— Amir Md Amiruzzaman
джерело

3

Як зазначено на w3schools :

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

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

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

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

— Вілкер Айсрі
джерело

3

@MateusLeon Втратити не втрачено.

— реформований

0

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

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

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

— Сагар Вагела
джерело

4

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

— Jukka K. Korpela