Html type file input: — HTML: HyperText Markup Language

Leave a Comment / Html / By /

Содержание

Фильтр файлов по расширению у input type file

11.01.2021

13517

В закладки

Атрибут accept в <input type="file"> устанавливает фильтр на типы файлов в окне выбора файла. В качестве значения может использоваться разрешение файлов или их MIME-типы (например: image/jpeg).

Примеры использования:

1

Выбор только файлов PNG:

<form action="" method="post" enctype="multipart/form-data">
	<label>Файл PNG:</label>
	<input type="file" name="file" accept=".png">
</form>

HTML

Пример:

2

Выбор только файлов JPG, JPEG, PNG:

<form action="" method="post" enctype="multipart/form-data">
	<label>Файл JPG или PNG:</label>
	<input type="file" name="file" accept=".jpg,.jpeg,.png">
</form>

HTML

Пример:

3

Так как у файлов с одним MIME-типом может быть множество расширений, то проще сделать фильтровку по нему, например text/plain.

<form action="" method="post" enctype="multipart/form-data">
	<label>Текстовые файлы:</label>
	<input type="file" name="file" accept="text/plain">
</form>

HTML

Пример:

4

В HTML5 допустимо указывать группу файлов:

  • audio/* – любые аудио файлы;
  • video/* – любые видеофайлы;
  • image/* – любые графические файлы;
<form action="" method="post" enctype="multipart/form-data">
	<label>Графические файлы:</label>
	<input type="file" name="file-1" accept="image/*">
	
	<label>Аудио и видео файлы:</label>
	<input type="file" name="file-2" accept="audio/*,video/*">
</form>

HTML

Пример:

5

11.01.2021, обновлено 14. 12.2021

13517

#HTML #Input #Формы

В закладки

Другие публикации

Загрузка файлов через jQuery AJAX

В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы…

Блокировка многократной отправки формы

Из-за отправки файла, медленного интернета или тормозящего браузера, пользователь может нажать кнопку отправки формы…

Массив $_FILES

В PHP-скрипте обработка загруженных через форму происходит через глобальный массив $_FILES, рассмотрим его содержимое…

Работа с директориями в PHP

Набор PHP функций для работы с директориями, получение списка файлов в папке, копирование и удаление содержимого папок.

Как использовать это значение HTML »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Значение
Как определить тип ввода в HTML (все значения и атрибуты)
Что делает : Как использовать это значение HTML ?
Определяет окно загрузки файла с кнопкой обзора.

Содержимое

  • 1 Пример кода
  • 2 Поддержка браузером файла
  • 3 Все значения типа
  • 4 Все атрибуты ввода

Пример кода

Выберите файл для загрузки

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

После выбора файла имя файла появляется рядом с кнопкой.

Клэр Бродли

Клэр — опытный технический писатель, редактор и энтузиаст HTML. Она пишет для HTML.com и руководит контент-агентством Red Robot Media.

Поддержка браузера для файла

All All All All All All

All values ​​of type

Value name Примечания
текст Определяет поле ввода текста в форме.
флажок Определяет флажок, который пользователь может включать и выключать.
радио Определяет круглую кнопку выбора в форме.
пароль Отображает скрытое поле ввода пароля.
скрыто Определяет поле в форме, невидимое для пользователя.
submit Определяет кнопку, которая нажимается для отправки формы.
сброс Определяет кнопку в форме, которая вернет все поля к значениям по умолчанию.
кнопка Определяет ввод в виде кнопки.
файл Определяет окно загрузки файла с кнопкой обзора.
изображение Определяет изображение, которое щелкают, чтобы отправить форму.

Все атрибуты ввода

Имя атрибута Значения Примечания
Шаг Шаг Шаг 9005
required Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто.
только для чтения Запрещает пользователю редактировать значение ввода.
заполнитель Задает текст-заполнитель в текстовом вводе.
шаблон Указывает регулярное выражение, по которому проверяется значение ввода.
несколько Позволяет пользователю вводить несколько значений при загрузке файла или вводе по электронной почте.
мин. Задает минимальное значение для полей ввода чисел и дат.
max Задает максимальное значение для полей ввода чисел и дат.
список Указывает идентификатор элемента , который предоставляет список предложений автозаполнения для поля ввода.
высота Определяет высоту входного изображения.
formtarget Указывает контекст просмотра, в котором следует открыть ответ от сервера после отправки формы. Для использования только с типами ввода «отправить» или «изображение».
formmethod Указывает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение».
formenctype Указывает, как данные формы должны быть отправлены на сервер. Только для использования с типами ввода «отправить» и «изображение».
formaction Указывает URL-адрес для отправки формы. Может использоваться только для type=»submit» и type=»image».
форма Указывает форму, которой принадлежит поле ввода.
автофокус Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы.
тип текст
флажок
радио
пароль
скрытый
отправка
сброс
кнопка
файл
изображение
Определяет тип ввода.
имя Указывает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы.
значение Определяет начальное значение или выбор по умолчанию для поля ввода.
размер Определяет ширину ввода в символах.
maxlength Указывает максимальное количество символов, которые можно ввести в текстовый ввод.
checked Указывает, следует ли по умолчанию отмечать ввод флажка или переключателя формы.
граница Используется для указания границы ввода. Устарело. Вместо этого используйте CSS.
src Определяет URL-адрес источника для входного изображения.
отключено Отключает поле ввода.
ключ доступа Определяет сочетание клавиш для элемента.
язык Используется для указания языка сценариев, используемого для событий, запускаемых вводом.
autocomplete Указывает, должен ли браузер пытаться автоматически завершать ввод на основе данных, введенных пользователем в аналогичные поля.

input type=file – управление загрузкой файла

ⓘ input type=file – управление загрузкой файла # T

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

Допустимое содержимое #

пустой (пустой элемент)

Допустимые атрибуты #

глобальные атрибуты & имя & неполноценный & форма & тип★ & принимать и автофокус & необходимый и несколько

ⓘ глобальные атрибуты
Любые атрибуты, разрешенные глобально.
ⓘ имя = строка #
Часть имени пары имя/значение, связанная с этим элемент для отправки формы.
ⓘ отключен = «неполноценный» или «» (пустая строка) или пустая #
Указывает, что элемент представляет отключенный контроль.
ⓘ форма = Идентификационная ссылка НОВЫЙ #
Значение идентификатор атрибут на форма с которым связать элемент.
ⓘ тип = «файл» #
Указывает, что его вход element представляет собой список элементов файла.
ⓘ принять = список типов MIME #
Предоставляет UA подсказку о том, какие типы файлов сервер может принять.

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

ⓘ автофокус = «автофокус» или «» (пустая строка) или пустая НОВЫЙ #
Указывает, что элемент представляет элемент управления, к которому UA предназначен для того, чтобы сосредоточить внимание, как только документ загружен.
ⓘ требуется = «необходимый» или «» (пустая строка) или пустая НОВЫЙ #
Указывает, что элемент является обязательной частью формы подчинение.
ⓘ несколько = «несколько» или «» (пустая строка) или пустая НОВЫЙ #
Указывает, что элемент допускает несколько значений.

Дополнительные ограничения и предупреждения #

  • Ввод интерактивного элемента не должен появляются как потомки элемента a.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *