Загрузка файлов

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

Вид поля для загрузки файла в IE

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

Загрузка файлов в Opera и Chrome

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

Загрузка файлов в Firefox

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

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

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

<input type="file" атрибуты>

Атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты поля для отправки файла
АтрибутОписание
acceptУстанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
sizeШирина текстового поля, которое определяется числом символов моноширинного шрифта.
multipleПозволяет выбирать и загружать сразу несколько файлов.
nameИмя поля; используется для его идентификации обработчиком формы.

Для отправки файлов в форме необходимо сделать следующее:

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Отправка файла на сервер</title> </head> <body> <form enctype="multipart/form-data" method="post"> <p><input type="file" name="f"> <input type="submit" value="Отправить"></p> </form> </body> </html>

Хотя можно установить ширину поля через атрибут 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. Загрузка фотографий

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Загрузка файла</title> </head> <body> <form enctype="multipart/form-data" method="post"> <p>Загрузите ваши фотографии на сервер</p> <p><input type="file" name="photo" multiple accept="image/*,image/jpeg"> <input type="submit" value="Отправить"></p> </form> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты