Загрузка файлов в HTML. Как добавить в форму поле отправки файла?

загрузка файлов в html. как добавить в форму поле отправки файла?

Принципы загрузки фалов через форму

Функционал, отвечающий за отправку файлов на сервер, реализуется довольно просто. Как и в примерах из предыдущих уроков, за это отвечает специальное поле формы. Но ее настройка имеет некоторые особенности.

Статья «отправка формы в HTML» поясняет использование ряда атрибутов, меняющих поведение элемента <form>. При осуществлении загрузки фйалов нужно обратить особое внимание на атрибуты enctype и method, задающие способ кодирования отправляемых данных и HTTP-метод запроса.

Если ваша форма содержит поля, отвечающие за загрузку файлов, то элементу <form> необходимо явным образом установить атрибут enctype в значение multipart/form-data, а method задать как POST.

Заметка
Приведенные выше значения атрибутов не связанны непосредственно с HTML. Они оптимизируют внутренние процессы браузера. Если вы правильным образом настроите элемент <form>, отправка больших файлов будет произведена гораздо быстрее, а серверная программа сможет легко принять и обработать их.

Использование поля загрузки файлов

В HTML для отправки файлов из формы используется многозадачный элемент <input>. Его атрибут type должен иметь значение file. Браузер отобразит такое поле в виде кнопки с текстом «выберите файл» или аналогичным.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания поля загрузки файлов</title>
    </head>
    <body>
        <form method="POST" enctype="multipart/form-data">
            <input name="user-file" type="file">
            <br><br>
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>
Пример отображения поля отправки файла в браузере
рис 1. Отображение поля отправки файла в браузере

При нажатии кнопки откроется проводник файловой системы. В нем можно перемещаться по директориям компьютера. Интерфейс интуитивно понятен любому пользователю. Все что нужно сделать — это найти нужный файл и нажать кнопку «Открыть». Отметим, что выбирать нужные документы и файлы может только сам пользователь. Явное указание атрибута value с именем или расположением какого-либо файла не приведет к успеху.

Окно проводника для выбора файла
рис 2. Файловый проводник в операционной системе Linux

Чтобы выбранный файл был загружен при отправке формы, полю <input> необходимо добавить атрибут name с уникальным значением.

Множественный выбор и блокировка поля

По умолчанию пользователь может выбрать только один файл, предназначенный к отправке. HTML позволяет изменить это поведение. Множественный выбор станет доступным после добавления к полю <input> атрибута multiple.

Также нужно отметить, что поле загрузки файлов можно заблокировать с помощью атрибута disabled. Это сделает невозможным какое-либо взаимодействие с ним. Если оно заблокировано после осуществления выбора файла, он не будет отправлен вместе с остальными данными формы. Такая ситуация может возникнуть при использовании встроенного в браузер языка программирования JavaScript.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример блокировки поля множественного выбора</title>
    </head>
    <body>
        <form method="POST" enctype="multipart/form-data">
            <input disabled multiple name="user-file" type="file">
            <br><br>
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>

Последние публикации