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

Для того чтобы можно было загружать на сервер один или несколько файлов, в форме применяется специальное поле.
Синтаксис поля для отправки файла следующий.

<input type="file" атрибуты>
  • accept — Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.
  • size — Ширина текстового поля, которое определяется числом символов моноширинного шрифта.
  • multiple — Позволяет выбирать и загружать сразу несколько файлов.
  • name — Имя поля, используется для его идентификации обработчиком формы.

Прежде, чем использовать данное поле, в форме необходимо сделать следующее:

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


Пример 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. Загрузка фотографий

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

Не все браузеры поддерживают новые атрибуты. IE полностью игнорирует multiple и accept, Safari не поддерживает accept, а Firefox не работает с MIME-типом, только с ключевыми словами. Поэтому в примере выше специально для Firefox установлено значение image/*,image/jpeg. Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept.

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход /  Изменить )

Google photo

Для комментария используется ваша учётная запись Google. Выход /  Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход /  Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход /  Изменить )

Connecting to %s