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

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

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

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

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

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

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

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

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

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

<input type="file">

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

Табл. 1. Атрибуты поля для отправки файла
Атрибут Описание
name Имя поля; используется для его идентификации обработчиком формы.
disabled Блокирует поле для отправки файлов.
form Идентификатор формы для связывания поля с элементом <form>.
type Для загрузки файлов значение должно быть file.
accept Устанавливает фильтр на типы файлов, которые вы можете открыть через поле загрузки файлов.
autofocus Поле получает фокус после загрузки документа.
required Указывает, что поле является обязательным для заполнения.
multiple Позволяет выбирать и загружать сразу несколько файлов.

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

  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>

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

Пример 2. Загрузка нескольких файлов

<!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" multiple> <input type="submit" value="Отправить"></p> </form> </body> </html>

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

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В табл. 2 показаны некоторые допустимые значения атрибута accept.

Табл. 2. Типы файлов
Значение Описание
image/jpeg Только файлы в формате JPEG.
image/jpeg,image/png Только файлы в формате JPEG и PNG.
image/* Любые графические файлы.
image/*,video/* Любые графические и видеофайлы.

Использование дополнительных атрибутов показано в примере 3.

Пример 3. Загрузка фотографий

<!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>

Перейти к заданиям

Автор: Влад Мержевич
Последнее изменение: 05.08.2023