Html input file ограничить расширения файлов

Обновлено: 05.07.2024

Я хотел бы ограничить тип файла, который можно выбрать из средства выбора файлов собственной ОС, когда пользователь нажимает кнопку "Обзор" в элементе <input type="file"> в HTML. У меня такое ощущение, что это невозможно, но я хотел бы знать, есть ли есть решение. Я хотел бы придерживаться исключительно HTML и JavaScript; Нет вспышки, пожалуйста.

Строго говоря, ответ нет . Разработчик не может запретить пользователю выбирать файлы любого типа или расширения в диалоговом окне выбора файлов в собственной операционной системе.

Но все же, атрибут принять <input type = "file"> может помочь обеспечить фильтр в диалоговом окне выбора файла ОС. Например,

должен предоставить способ отфильтровать файлы, отличные от .xls или .xlsx. Хотя страница MDN для элемента input всегда говорила, что поддерживает это, к моему удивлению, это не работало для меня в Firefox до версии 42. Это работает в IE 10+, Edge и Chrome.

Итак, для поддержки Firefox старше 42 лет вместе с IE 10+, Edge, Chrome и Opera, я думаю, лучше использовать список MIME-типов через запятую:

[ Поведение Edge : раскрывающийся список фильтров типов файлов показывает типы файлов, упомянутые здесь, но не является значением по умолчанию в раскрывающемся списке. Фильтр по умолчанию - All files (*) .]

Вы также можете использовать звездочки в MIME-типах. Например:

W3C рекомендует авторам указывать MIME-типы и соответствующие расширения в атрибуте accept . Итак, лучший подход:

JSFiddle из того же: здесь .

Вот трихорошочитает о загрузке файлов и безопасности.

Для входного тега есть атрибут accept. Тем не менее, это не надежно в любом случае. Браузеры, скорее всего, воспринимают это как "предложение", то есть пользователь, в зависимости от файлового менеджера, также имеет предварительный выбор, отображающий только нужные типы. Они по-прежнему могут выбрать "все файлы" и загрузить любой файл, который они хотят.

читайте больше в html5 spec

Таким образом, ответ: нет вы не можете ограничить , но вы можете установить предварительный выбор, но вы не можете положиться на него.

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

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

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле. В браузерах Firefox, IE и Opera такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор. » (рис. 1). В Safari и Chrome доступна только кнопка «Выберите файл» (рис. 2).

Рис. 1. Вид поля для загрузки файла в Firefox

Рис. 2. Загрузка файлов в Chrome

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

Синтаксис поля для отправки файла следующий.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

задать метод отправки данных POST ( method="post" );
установить у атрибута enctype значение multipart/form-data .

Форма для загрузки файла продемонстрирована в примере 1.

Пример 1. Создание поля для отправки файла

HTML5 IE Cr Op Sa Fx

Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

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

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

audio/* — выбор музыкальных файлов любого типа;
image/* — графические файлы;
video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept .

Табл. 2. Типы файлов

Значение	Описание
image/jpeg	Только файлы в формате JPEG.
image/jpeg,image/png	Только файлы в формате JPEG и PNG.
image/*	Любые графические файлы.
image/,video/	Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 2.

Пример 2. Загрузка фотографий

HTML5 IE 10+ Cr Op Sa Fx

Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept , Safari не поддерживает accept , а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg . Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept .

Результат примера показан на рис. 3. Обратите внимание, что из-за наличия multiple несколько изменился вид поля.

Я хотел бы ограничить тип файла, который может быть выбран в собственном средстве выбора файлов ОС, когда пользователь нажимает кнопку «Обзор» в элементе <input type="file"> в HTML. У меня такое чувство, что это невозможно, но я хотел бы знать, есть решение. Я хотел бы придерживаться исключительно HTML и JavaScript; не прошивайте, пожалуйста.

Строго говоря, ответ - нет . Разработчик не может запретить пользователю загружать файлы любого типа или расширения.

Тем не менее, accept атрибута <input type = "file"> может помочь предоставить фильтр в диалоговом окне выбора файла. ОС. Например,

Должен предоставлять способ отфильтровывать файлы, отличные от .xls или .xlsx. Хотя страница MDN для элемента input всегда говорил, что он поддерживает это, к моему удивлению, у меня это не работало в Firefox до версии 42. Это работает в IE 10+, Edge и Chrome.

Итак, для поддержки Firefox старше 42 вместе с IE 10+, Edge, Chrome и Opera, я думаю, лучше использовать список MIME-типов, разделенных запятыми:

Поведение [ Edge (EdgeHTML): раскрывающееся меню фильтра типов файлов показывает типы файлов, упомянутые здесь, но не является значением по умолчанию в раскрывающемся списке. Фильтр по умолчанию: All files (*) .]

Вы также можете использовать звездочки в MIME-типах. Например:

W3C рекомендует авторам укажите как MIME-типы, так и соответствующие расширения в атрибуте accept . Итак, лучший подход:

Вот три хороших читает о загрузке файлов и безопасности.

Да, ты прав. С HTML это невозможно. Пользователь сможет выбрать любой файл, который захочет.

Технически вы можете указать атрибут accept (альтернатива в html5) в элементе input , но он не поддерживается должным образом.

Я знаю, что это немного поздно.

Используйте тег input с атрибутом accept

Чтобы выбрать только файлы изображений, вы можете использовать этот accept="image/*"

Будут показаны только gif, jpg и png, снимок экрана из Chrome версии 44.

На самом деле вы могли бы сделать это с помощью javascript, но помните, что js - это клиентская сторона, поэтому вы фактически будете «предупреждать пользователей» о том, какие типы файлов они могут загружать, если вы хотите ИЗБЕГАТЬ (ограничивать или ограничивать, как вы сказали) определенные типы файлов, которые вы ДОЛЖНЫ сделай это на стороне сервера.

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

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

Что касается проверки, мы должны делать это на стороне сервера. Мы также можем сделать это на стороне клиента в js, но это не надежное решение. Мы должны проверять на стороне сервера.

Для этих требований я действительно предпочитаю структуру разработки веб-приложений Java struts2. Благодаря встроенной функции загрузки файлов, загрузка файлов в веб-приложения на основе struts2 - это проще простого. Просто укажите форматы файлов, которые мы хотели бы принять в нашем приложении, а обо всем остальном позаботится ядро самого фреймворка. Вы можете проверить это на официальном сайте struts.

Могу предложить следующее:

Если вы должны заставить пользователя выбирать любой из файлов изображений по умолчанию, используйте accept = "image / *"

если вы хотите ограничиться определенными типами изображений, используйте accept = "image / bmp, image / jpeg, image / png"

если вы хотите ограничиться определенными типами, используйте accept = ". bmp, .doc, .pdf"

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

Мы только что добавили несколько новых функций. Некогда было убирать и

Вы можете использовать атрибут «accept» в качестве фильтра в поле выбора файла. Использование "accept" поможет вам фильтровать входные файлы на основе их "суффикса" или их "MIME-типа".

1. Фильтр на основе суффикса: Здесь атрибут accept просто позволяет выбирать файлы с расширением .jpg.

2. Фильтр на основе "типа файла". Здесь атрибут "accept" просто позволяет вам выбрать файл с типом "image / jpeg".

Важно: мы можем изменить или удалить расширение файла без изменения типа мема. Например, можно иметь файл без расширения, но тип этого файла может быть «image / jpeg». Таким образом, этот файл не может пройти фильтр accept = ". Jpeg". но он может передавать accept = "image / jpeg".

3. Мы можем использовать * для выбора всех типов файлов. Например, приведенный ниже код позволяет выбирать все виды изображений. например «изображение / png» или «изображение / jpeg» или . Все они разрешены.

4. Мы можем использовать cama (,) как оператор или в атрибуте select. Например, чтобы разрешить все виды изображений или файлов PDF, мы можем использовать этот код:

Основываясь на предыдущих ответах об использовании атрибута accept, вы можете сделать это с помощью Файловый API. Это также дает вам доступ к содержимому файла, если вы используете FileReader выполнить локальный синтаксический анализ или обработку данных.

Сначала создайте элемент ввода, здесь вы можете применить тип файла к атрибуту accept, но для примера он позволит вам выбрать все типы файлов.

Затем нам нужно прослушать событие 'change' в элементе ввода.

Внутри функции вы сможете получить доступ к объекту файлов ввода.

Мы не можем просто перебирать объект, поскольку это не массив, однако мы можем использовать функцию item () для доступа к нашему объекту File из списка.

Файловый API очень хорошо поддерживается современными браузерами. Комбинируя это с атрибутом accept, вы можете легко отфильтровать то, что локальный пользователь может выбрать в загрузке, и предоставить полезную обратную связь. Если вы загружаете файл, вам все равно следует проверить и подтвердить тип файла на вашем сервере.

Для входного тега есть атрибут accept. Однако это в любом случае ненадежно. Браузеры, скорее всего, рассматривают это как «предложение», то есть пользователь, в зависимости от файлового менеджера, также будет иметь предварительный выбор, который отображает только желаемые типы. Они по-прежнему могут выбрать «все файлы» и загрузить любой файл, который захотят.

Итак, ответ: нет , вы не можете ограничить , но вы можете установить предварительный выбор, но вы не можете полагаться в теме.

В качестве альтернативы или дополнения вы можете сделать что-то подобное, проверив имя файла (значение поля ввода) с помощью JavaScript, но это ерунда, потому что это не обеспечивает защиты, а также не облегчает выбор для пользователя. Это только потенциально может обмануть веб-мастера, заставив его думать, что он / она защищен, и открыть брешь в безопасности. Это может быть головной болью для пользователей, у которых есть альтернативные расширения файлов (например, jpeg вместо jpg), прописные буквы или вообще без расширений файлов (как это часто бывает в системах Linux).

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

Я хотел бы ограничить тип файла, который можно выбрать из средства выбора файлов собственной ОС, когда пользователь нажимает кнопку «Обзор» в <input type="file"> элементе в HTML. У меня есть ощущение , что это невозможно, но я хотел бы знать , если это решение. Я хотел бы придерживаться исключительно HTML и JavaScript; Нет вспышки, пожалуйста.

Это легко возможно с PHP, но я не знаю, можете ли вы использовать это, поэтому я не буду публиковать код. Я могу, но у меня есть решение , работая с JavaScript - это снимает раздражение загрузки файла , то получает «Неверный файл!» ошибка. Стоит отметить, что, хотя он не подходит для валидации, но при его принятии видимые файлы будут ограничены принятыми, пока пользователь просматривает их (по крайней мере, в некоторых браузерах . ). Так что это скорее функция эргономики пользовательского интерфейса, чем функция проверки.

Но все же атрибут accept <input type = "file"> может помочь обеспечить фильтр в диалоговом окне выбора файлов в ОС. Например,

должен предоставить способ отфильтровать файлы, отличные от .xls или .xlsx. Хотя на странице MDN для input элемента всегда говорилось, что она поддерживает это, к моему удивлению, это не работало для меня в Firefox до версии 42. Это работает в IE 10+, Edge и Chrome.

Поведение [ Edge (EdgeHTML): раскрывающийся список фильтров типов файлов показывает типы файлов, упомянутые здесь, но не является значением по умолчанию в раскрывающемся списке. Фильтр по умолчанию All files (*) .]

Вы также можете использовать звездочки в MIME-типах. Например:

W3C рекомендует авторам указывать в accept атрибуте как MIME-типы, так и соответствующие расширения . Итак, лучший подход это:

JSFiddle из того же: здесь .

Вот три хороших чтения по загрузке файлов и безопасности.

Читайте также: