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

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

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

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


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

КОММЕНТАРИИ

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


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