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

Для загрузки на сервер одного или нескольких файлов вроде фотографий, документов и видео применяется специальное поле формы. В браузере 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>

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

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