19.03.2017   3575

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

Форма для загрузки файлов на 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>

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

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

Домашнее задание
Для просмотра домашки нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности

Следующий урок Предыдущий урок

Комментарии

Чтобы написать комментарий нужно войти на сайт.
Или получить доступ прямо сейчас:


Нажимая эту кнопку
Вы принимаете политику конфиденциальности