Форма для загрузки файлов на HTML

Форма для загрузки файлов

Всем привет! В этом уроке речь мы создадим форму для загрузки файлов. Выглядеть поле для загрузки файлов может по-разному: сравните поле для загрузки фотографий во "ВКонтакте" и поле для прикрепления документов на "Госуслугах". Да, выглядят по разному, но работают на самом деле одинаково. Итак, поехали.

Для того, чтобы создать форму, позволяющую осуществить загрузку файлов, необходимо использовать тег <input> с типом file. При этом обязательно следует задать такой атрибут, как имя.

Однако, само по себе поле не может отправить файл на сервер. Чтобы это стало возможным, следует форме приписать атрибут enctype, у которого будет значение multipart/form-data:

<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="fileField">Выберите файл для загрузки:</label>
    <br>
    <input type="file" name="uploadingFile" id="fileField">
</form>

А вот так будет выглядеть наше получившееся поле:
Поле для загрузки файла

Важное замечание касательно внешнего вида: поля для загрузки файла могут иметь разный внешний вид, в зависимости от того, какой операционной системой пользуется посетитель сайта. Изменению с помощью стилей внешний вид поля поддается очень тяжело (например, чтобы сделать как у ВК, придётся сильно попотеть).

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Домашнее задание

  • создайте простейшую форму для загрузки файла: поле выбора файла и кнопку с надписью "Загрузить". Пример:
  • Пример формы