Реализация загрузки файла под html довольно проста, но я только что заметил, что есть атрибут 'accept', который можно добавить к <input type="file" ...> тегу .
Этот атрибут полезен как способ ограничения загрузки файлов на изображения и т. Д.? Каков наилучший способ его использования?
В качестве альтернативы, есть ли способ ограничить типы файлов, предпочтительно в диалоговом окне файлов, для тега ввода файла HTML?
html
filter
cross-browser
mime-types
Даррен Остер
источник
источник
input type="file"чтобы проверить, чтоacceptмогут быть выбраны только типы файлов ed.Ответы:
acceptАтрибут невероятно полезен. Это подсказка для браузеров показывать только те файлы, которые разрешены для текущегоinput. Хотя пользователи, как правило, могут переопределять их, это помогает сузить результаты для пользователей по умолчанию, чтобы они могли получить именно то, что им нужно, без необходимости просматривать сотни различных типов файлов.использование
Примечание. Эти примеры написаны на основе текущей спецификации и могут не работать во всех (или любых) браузерах. Спецификация также может измениться в будущем, что может нарушить эти примеры.
Из спецификации HTML ( источник )
источник
accept='.jpg,.png,.gif,.pdf,.eps'выбор не был разрешен. Я перепробовал множество вариантов - разделенный пробелами, без точек и т. Д., Но в Chrome v20 не было кубиков, поэтому я использовал mime-типы, и это отлично сработало:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'image/*. Облом.Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.просто мимы. Нет расширений. Это зависит от клиента, чтобы определить тип пантомимы.A string whose first character is a U+002E FULL STOP character (.) -- Indicates that files with the specified file extension are accepted.video/*означает, что вы не можете загрузить mp4 в Safari, вам также нужно будет указатьvideo/mp4Да, это чрезвычайно полезно в браузерах, которые его поддерживают, но «ограничение» - это удобство для пользователей (чтобы они не перегружались несущественными файлами), а не как способ запретить им загружать вещи, которые вам не нужны загрузка.
Поддерживается в
Вот список типов контента, которые вы можете использовать с ним, а затем соответствующие расширения файлов (хотя, конечно, вы можете использовать любое расширение файла):
источник
accept=".ttf"работает как положено.В 2015 году я нашел единственный способ заставить его работать как для Chrome, так и для Firefox, - добавить все возможные расширения, которые вы хотите поддерживать, включая варианты:
Проблема с Firefox : при использовании
image/jpegmime-типа Firefox будет показывать только.jpgфайлы, очень странно, как если бы с общим.jpegне все в порядке ...Что бы вы ни делали, обязательно попробуйте файлы с разными расширениями. Может быть, это даже зависит от ОС ... Я полагаю
accept, регистр не учитывается, но, возможно, не во всех браузерах.Вот документы MDN о принятии :
источник
Атрибут Accept был введен в RFC 1867 , предназначенном для включения фильтрации по типу файла на основе типа MIME для элемента управления выбора файла. Но с 2008 года большинство, если не все браузеры, не используют этот атрибут. Используя сценарии на стороне клиента, вы можете выполнить своего рода проверку на основе расширений для отправки данных правильного типа (расширения).
Другие решения для расширенной загрузки файлов требуют Flash-фильмов, таких как SWFUpload или Java-апплетов, таких как JUpload .
источник
Поддерживается Chrome. Он не должен использоваться для проверки, но для указания типа ОС. Если у вас есть
accept="image/jpeg"атрибут при загрузке файла, ОС может показывать только файлы предложенного типа.источник
accept="image/*"работает на Firefox, Chrome и Opera.accept="text/plain"вместо этого.Прошло несколько лет, и Chrome, по крайней мере, использует этот атрибут. Этот атрибут очень полезен с точки зрения удобства использования, поскольку он отфильтровывает ненужные файлы для пользователя, делая его работу более плавной. Тем не менее, пользователь все равно может выбрать «все файлы» из типа (или иным образом обойти фильтр), поэтому вы всегда должны проверять файл, где он фактически используется; Если вы используете его на сервере, проверьте его там перед использованием. Пользователь всегда может обойти любой сценарий на стороне клиента.
источник
Если браузер использует этот атрибут, он предназначен только для помощи пользователю, поэтому он не будет загружать файл размером в несколько мегабайт, просто чтобы увидеть, как он отклонен сервером ...
То же самое для
<input type="hidden" name="MAX_FILE_SIZE" value="100000">тега: если браузер использует его, файл не будет отправлен, но возникнет ошибка, приводящая к ошибкеUPLOAD_ERR_FORM_SIZE(2) в PHP (не знаю, как она обрабатывается на других языках).Обратите внимание, что это помогает пользователю . Конечно, сервер должен всегда проверять тип и размер файла на его конце: эти значения легко подделать на стороне клиента.
источник
Еще в 2008 году это было неважно из-за отсутствия мобильных ОС, но сейчас это очень важно.
Когда вы устанавливаете принятые типы пантомимы, то, например, пользователю Android предоставляется системный диалог с приложениями, которые могут предоставить ему контент пантомимы, который принимает ввод файлов, что хорошо, потому что навигация по файлам в проводнике на мобильных устройствах медленная и часто вызывает стресс. ,
Одна важная вещь заключается в том, что некоторые мобильные браузеры (основанные на версиях Chrome 36 и Chrome Beta 37 для Android) не поддерживают фильтрацию приложений по расширениям и нескольким типам пантомимы.
источник