Загрузка файлов
Для загрузки на сервер одного или нескольких файлов вроде фотографий, документов и видео применяется специальное поле формы. В браузере IE такой элемент отображается как текстовое поле, рядом с которым располагается кнопка с надписью «Обзор...» (рис. 1). В Safari, Opera и Chrome доступна только кнопка «Выбрать файлы» (рис. 2), в Firefox это только кнопка «Обзор» (рис. 3).
Рис. 1. Вид поля для загрузки файла в IE
Рис. 2. Загрузка файлов в Opera и Chrome
Рис. 3. Загрузка файлов в Firefox
При нажатии на кнопку открывается окно для выбора файла, где можно указать, какой файл или файлы пользователь желает использовать.
Синтаксис поля для отправки файла следующий.
<input type="file" атрибуты>
Атрибуты перечислены в табл. 1.
Атрибут | Описание |
---|---|
accept | Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. |
size | Ширина текстового поля, которое определяется числом символов моноширинного шрифта. |
multiple | Позволяет выбирать и загружать сразу несколько файлов. |
name | Имя поля; используется для его идентификации обработчиком формы. |
Для отправки файлов в форме необходимо сделать следующее:
- задать метод отправки данных POST (method="post");
- установить у атрибута enctype значение multipart/form-data.
Форма для загрузки файла продемонстрирована в примере 1.
Пример 1. Создание поля для отправки файла
Хотя можно установить ширину поля через атрибут size, в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.
Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать сразу несколько файлов для одновременной загрузки.
Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:
- audio/* — выбор музыкальных файлов любого типа;
- image/* — графические файлы;
- video/* — видеофайлы.
В табл. 2 показаны некоторые допустимые значения атрибута accept.
Значение | Описание |
---|---|
image/jpeg | Только файлы в формате JPEG. |
image/jpeg,image/png | Только файлы в формате JPEG и PNG. |
image/* | Любые графические файлы. |
image/*,video/* | Любые графические и видеофайлы. |
Использование дополнительных атрибутов показано в примере 2.
Пример 2. Загрузка фотографий
См. также
- <input>
- Выравнивание элементов форм
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Поле для ввода пароля
- Поле для пароля
- Пользовательские формы
- Построение форм
- Скрытое поле
- Стилизация переключателей
- Стилизация флажков
- Сумасшедшие формы
- Текстовое поле
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML