Атрибут accept в HTML


HTML Атрибут accept

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

Атрибут accept используется только если атрибут type тега имеет значение «file» и определяет виды файлов (их расширение), которые могут быть закачаны пользователем на сервер.

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

Синтаксис

Значения

В качестве значения указывается имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

Значение по умолчанию

Для того чтобы ограничить форму на добавление только картинок следует в accept дописать (image/*) :

HTML accept attribute

accept

The purpose of the HTML accept attribute is to specify the supported MIME types (content type) of a form or input element.

Supported elements

HTML accept attribute supports form and input

Syntax

Type of value

Type of value of HTML accept attribute is a valid Content Type(for example image/gif).

Value

A content type or a comma-separated list of content types.

Default value

There is no default value of HTML accept attribute.

Supported doctypes

HTML 4.01 strict, HTML 4.01 transitional, HTML 4.01 frameset.

Example of HTML accept attribute with form

Result

View this example in a separate browser window

Example of HTML accept attribute with input

Result

View this example in a separate browser window

Атрибут accept в HTML

Обязательный атрибут: нет.

Пример HTML: применение атрибута accept-charset

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Да Да Да Да

Поддержка браузерами

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Нет Да Да Да Да

IE отправляет все данные в кодировке utf-8 невзирая на указания атрибута accept-charset .

/ Атрибут accept

Описание

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

Синтаксис


HTML
XHTML

Применяется

К полю для отправки файла ( ).

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

В HTML5 также допустимо в качестве значения указывать audio/* для выбора всех звуковых файлов, video/* для видеофайлов и image/* для всех графических файлов.

Значение по умолчанию

Пример 1
Пример 2

Примечание

Opera 11 не воспринимает значения, если они разделены между собой пробелом (accept=»image/jpeg, image/png, image/gif»).

Firefox 4 поддерживает только значения audio/* , video/* и image/* .

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
10 8 10 4
Android Firefox Mobile Opera Mobile Safari Mobile

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Илон Маск рекомендует:  Что такое код imap_sort

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

File input ‘accept’ attribute — is it useful?

Implementing a file upload under html is fairly simple, but I just noticed that there is an ‘accept’ attribute that can be added to the tag.

Is this attribute useful as a way of limiting file uploads to images, etc? What is the best way to use it?

Alternatively, is there a way to limit file types, preferably in the file dialog, for an html file input tag?

8 Answers 8

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input . While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they’re looking for without having to sift through a hundred different file types.

Usage

Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.

From the HTML Specification (source)

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:

The string audio/*

  • Indicates that sound files are accepted.

The string video/*

  • Indicates that video files are accepted.

The string image/*


  • Indicates that image files are accepted.

A valid MIME type with no parameters

  • Indicates that files of the specified type are accepted.

A string whose first character is a U+002E FULL STOP character (.)

  • Indicates that files with the specified file extension are accepted.

Yes, it is extremely useful in browsers that support it, but the «limiting» is as a convenience to users (so they are not overwhelmed with irrelevant files) rather than as a way to prevent them from uploading things you don’t want them uploading.

It is supported in

  • Chrome 16 +
  • Safari 6 +
  • Firefox 9 +
  • IE 10 +
  • Opera 11 +

Here is a list of content types you can use with it, followed by the corresponding file extensions (though of course you can use any file extension):

Accept attribute was introduced in the RFC 1867, intending to enable file-type filtering based on MIME type for the file-select control. But as of 2008, most, if not all, browsers make no use of this attribute. Using client-side scripting, you can make a sort of extension based validation, for submit data of correct type (extension).

Other solutions for advanced file uploading require Flash movies like SWFUpload or Java Applets like JUpload.

In 2015 the only way I found to make it work for both Chrome and Firefox is to put all possible extensions you want to support, including variants:

Problem with FireFox: Using the image/jpeg mime type FireFox will only show .jpg files, very strange as if the common .jpeg was not ok.

Whatever you do, be sure to try with files having many different extensions. Maybe it even depends on the OS .

I suppose accept is case insensitive, but maybe not in every browser.

accept If the value of the type attribute is file, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers:

Элемент input в html 5, мультиаплоад

У элемента input в HTML 5 появился атрибут multiple, с помощью которого мы можем выбрать для загрузки несколько файлов. Этот атрибут принимает только одно значение «multiple», в живую будет выглядеть так:

Обратите внимание на name, мы явно в нем указали, что это массив.

Сразу появляется вопрос, какой браузер это новшество не понимает, ответ легко предсказуем, это семейство Internet Explorer. Начиная с 9 версии и ниже, они не поддерживают этот функционал и просто проигнорируют атрибут, искренне надеюсь что в финальной 10 версии они это поправят.
Кроме того что, мы дали пользователям загрузить сразу много файлов, мы должны позаботиться о них, и дать им возможность загрузит именно те файлы которые нам необходимы. И тут на помощь приходит еще один новый атрибут accept. Который принимает «MIME Media Types».

Илон Маск рекомендует:  Строковые процедуры и функции

Такой записью мы говорим о том, что загружать можно только картинки, и в окне выбора файлов сработает фильтр, который будет показывать пользователю только графические типы файлов. Firefox и Safari игнорируют accept.

И снова у нас появляется проблема, пользователь пытается отправить форму, но он был настолько занят, что забыл заполнить данными наш input. Мы не должны давать ему повода нервничать и волноваться, и будем в такой ситуации использовать еще один новый атрибут.

Атрибут required, принимает строку «required», и делает поле обязательным для заполнения.

Как это будет работать, при попытке отправить форму с пустым input, появится предупреждение о ошибке с следующим текстом:

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

У нас осталось несколько проблем, которые нужно решить для удобства пользователя.

  • Еще раз проверить тип файла
  • Размеры файлов
  • Количество файлов

И у нас есть очень простой способ это все проверить с помощью любимого JavaScript. В элементе input с типом file содержится невидимый атрибут files, при обращении к которому мы получаем объект FilleList, если input не пустой, иначе undefined.

Где 0,1,2 это ключи загружаемых файлов.
Length, количество файлов.
Метод item() принимающий ключ файла.

Обратиться к файлу можно двумя способами:

В переменной file будет содержаться объект файла:

У Оперы нет свойств fileSize, FileName но зато есть name и size. В Chrome, Firefox, Safari есть все четыре свойства.
Только в Chrome есть свойство lastModifiedDate.

Заострим внимание на трех методах.

  • getAsBinary: получить исходный код файла.
  • getAsDataURL: получить данные преобразованные в base64
  • getAsText: тут я каюсь, до сих пор не разобрался что это, и буду очень благодарен если разъясните мне.

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

И если вы валидируете форму с помощью JavaScript, то опираясь на выше изложенных данных, любой валидатор можно расширить, для проверки загружаемого контента в элементе input, от размера файла, веса, количества, вплоть до валидации пикселей в изображении.

Ресурс который мне помог узнать и понять вышеизложенное про новые возможности input .

Идентификатор входного файла «accept» — это полезно?


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

Этот атрибут полезен как способ ограничения загрузки файлов на изображения и т.д.? Каков наилучший способ его использования?

В качестве альтернативы существует ли способ ограничить типы файлов, предпочтительно в диалоговом окне файла, для тега ввода html файла?

Атрибут accept невероятно полезен. Это подсказка для браузеров только для отображения файлов, разрешенных для текущего input . Хотя он обычно может быть переопределен пользователями, он помогает сузить результаты для пользователей по умолчанию, поэтому они могут получить именно то, что они ищут, не просеивая сотни разных типов файлов.

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

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

Из спецификации HTML (источник)

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

Если указано, атрибут должен состоять из набор разделенных запятыми токенов, каждый из которых должен быть ASCII без учета регистравыполните одно из следующих действий:

Строка audio/*

  • Указывает, что звуковые файлы приняты.

Строка video/*

  • Указывает, что видеофайлы приняты.

Строка image/*

  • Указывает, что файлы изображений приняты.

A действительный тип MIME без параметров

  • Указывает, что файлы указанного типа приняты.
Илон Маск рекомендует:  Функции bios

Строка, первым символом которой является символ U + 002E FULL STOP (.)

  • Указывает, что файлы с указанным расширением файла принимаются.

Да, это чрезвычайно полезно в браузерах, которые его поддерживают, но «ограничение» — это удобство для пользователей (поэтому они не перегружены ненужными файлами), а не как способ предотвратить их загрузку вещей, t хотят, чтобы они загружались.

  • Chrome 16 +
  • Safari 6 +
  • Firefox 9 +
  • IE 10 +
  • Opera 11 +

Вот список типов содержимого, с которым вы можете использовать его, а затем соответствующие расширения файлов (хотя, конечно, вы можете использовать любое расширение файла):

Атрибут Accept был введен в RFC 1867, намереваясь включить фильтрацию типа файла на основе типа MIME для элемента управления выбором файла. Но с 2008 года большинство, если не все, браузеры не используют этот атрибут. Используя скрипты на стороне клиента, вы можете сделать валидацию на основе расширения, чтобы отправить данные правильного типа (расширение).

Другие решения для расширенной загрузки файлов требуют Flash-роликов, таких как SWFUpload или Java-апплеты, такие как JUpload.

В 2015 году я нашел единственный способ заставить его работать как для Chrome, так и для Firefox, — добавить все возможные расширения, которые вы хотите поддерживать, включая варианты:

Проблема с FireFox: при использовании mime- image/jpeg FireFox будет показывать только файлы .jpg , что очень странно, как если бы обычный .jpeg не был в порядке.

Что бы вы ни делали, обязательно попробуйте файлы с разными расширениями. Может быть, это даже зависит от ОС.

Я полагаю, что accept не учитывает регистр, но, возможно, не во всех браузерах.

принять Если значением атрибута type является file, то этот атрибут будет указывать типы файлов, которые принимает сервер, в противном случае он будет игнорироваться. Значение должно быть разделенным запятыми списком уникальных спецификаторов типов контента:

Солянка сборная от wmas

Атрибут accept в форме выбора загружаемого файла

Что собой представляет атрибут accept в теге INPUT с type=file, а также зачем он нужен. Работа атрибута accept на примере браузера Opera.

В спецификации формата HTML 4.01 говорится, что атрибут accept , употребляемый в теге INPUT с типом file, определяет MIME тип загружаемых на сервер файлов, что позволяет обеспечить корректную обработку данных. Также упоминается, что пользовательский агент (браузер) может использовать эту информацию для фильтрации не соответствующих файлов.

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

Обратите внимание на значение атрибута accept, в нашем случае это: image/x-png — MIME тип соответствующий формату файла PNG. Обработка же такого HTML-кода браузером Opera будет иметь следующий вид:

Кликнув по кнопке «Обзор…», перед нами откроется окно «Открыть» в котором будут отображаться файлы соответствующего типа.

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

HTML | атрибут accept-charset

Атрибут accept-charset используется для определения кодировки символов и для отправки формы. Значением по умолчанию атрибута accept-charset является строка «UNKNOWN», которая указывает кодировку, равную кодировке документа, содержащего элемент .

Синтаксис:

Значение атрибута: Значение атрибута содержит разделенное списком значение одного или нескольких атрибутов кодирования. Общее значение атрибута кодирования: UTF-8, ISO-8859-1. Этот атрибут всегда связан только с элементом формы.

HTML | accept Attribute

The HTML accept Attribute is used to specifies the type of file that the server accepts. This attribute can be used with element only. This attribute is not used for validation tool because file uploads should be validated on the Server.

Syntax:

Attribute Values

  • file_extension: It Specify the file extension(s) like .gif, .jpg, .png, .doc) the user can pick from.
  • audio/*: The user can pick all sound files.
  • video/*: The user can pick all video files.
  • image/*: :A valid media type, with no parameters. Look at IANA Media Types for a complete list tandard media types
  • media_type: A valid media type without parameters.
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL