Как получить элемент ввода HTML типа «файл», чтобы принимать только файлы PDF? - PullRequest
29 голосов
/ 10 октября 2009

существует ли способ, которым файл html-элемента

<input name="file1" type="file" style="width:300px">

принимает только файлы PDF, а при просмотре отображаются только файлы PDF ...

Спасибо

Ответы [ 7 ]

58 голосов
/ 27 июня 2012

Чтобы элемент ввода HTML file мог принимать только PDF-файлы, вы можете использовать атрибут accept в современных браузерах, таких как Firefox 9+, Chrome 16+, Opera 11+ и IE10 +, например:

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

Вы можете объединить несколько типов пантомимы с запятой.

Следующая строка будет принимать файлы JPG, PNG, GIF, PDF и EPS:

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">

В более старых браузерах нельзя ограничивать диалоговое окно файла собственной операционной системы - вам придется использовать Flash, Java-апплет или что-то подобное для управления передачей файлов.

И, конечно, само собой разумеется, что ничего не делает для проверки достоверности типа файла . Вы сделаете это на стороне сервера после загрузки файла.

Небольшое обновление - с помощью javascript и FileReader API вы можете выполнить дополнительную проверку на стороне клиента, прежде чем загружать огромные файлы на свой сервер и проверять их снова.

3 голосов
/ 10 октября 2009
2 голосов
/ 10 октября 2009

Нет способа сделать это, кроме проверки расширения файла с помощью JavaScript, когда входной путь заполняется средством выбора файлов. Для реализации чего-либо более интересного вам нужно написать свой собственный компонент для любого браузера (activeX или XUL)

В HTML4.01 есть атрибут accept, но я не знаю ни одного браузера, поддерживающего его - например, accept="image/gif,image/jpeg - так что это аккуратная, но непрактичная спецификация

1 голос
/ 16 апреля 2013

Предыдущие постеры допустили небольшую ошибку. Атрибут accept является только отображаемым фильтром. Это не будет проверять вашу запись перед отправкой.

Этот атрибут заставляет диалоговое окно файла отображать только требуемый тип пантомимы. Но пользователь может переопределить этот фильтр. Он может выбрать . и просмотреть все файлы в текущем каталоге. Тем самым он может выбрать любой файл с любым расширением и отправить форму.

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

Но вы можете использовать javascript, чтобы проверить выбранное имя файла перед отправкой. Просто вставьте атрибут onclick на кнопку отправки и вызовите код, который проверит значение входного файла. Если расширение запрещено, вам придется вернуть false, чтобы аннулировать форму. Вы даже можете использовать пользовательский валидатор jQuery и т. Д. Для проверки формы.

Наконец, вам также нужно протестировать расширение на стороне сервера. Та же проблема с максимально допустимым размером файла.

0 голосов
/ 10 октября 2009

Может быть полезно запретить отвлеченному пользователю делать невольный неправильный выбор, но в любом случае вам все равно придется выполнить проверку на стороне сервера.
Лучший способ - это быть понятным на странице загрузки. После этого, если пользователь тупо загружает большой файл с неправильным типом, это его потеря времени, нет?

0 голосов
/ 10 октября 2009

номер

Но вы можете проверить SWFUpload и Ajax Upload

0 голосов
/ 10 октября 2009

Не с контролем файла HTML, нет. Загрузчик флэш-файлов может сделать это за вас. Вы можете использовать некоторый код на стороне клиента для проверки расширения PDF после их выбора, но вы не можете напрямую контролировать то, что они могут выбрать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...