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

11.1 Элемент <input type="file">

Веб-приложения часто требуют от пользователей загружать файлы на сервер. Это может быть полезно для загрузки документов, изображений, видео и других типов данных. HTML предоставляет элемент <input type="file"> для создания интерфейсов загрузки файлов. Ниже мы подробно рассмотрим использование этого элемента и его атрибутов, таких как multiple и accept.

Элемент <input type="file"> создает элемент интерфейса, который позволяет пользователям выбирать файлы с их устройства и загружать их на сервер. Это один из ключевых элементов формы в HTML, который позволяет интегрировать функциональность загрузки файлов в веб-приложения.

Основные атрибуты элемента <input type="file">

1. type="file" — определяет, что элемент предназначен для выбора файлов.
2. name — задает имя элемента, которое будет использовано при отправке данных формы на сервер.
3. multiple — позволяет пользователю выбирать несколько файлов одновременно.
4. accept — указывает типы файлов, которые можно выбрать, используя MIME-типы или расширения файлов.

Примеры использования элемента <input type="file">

Простой пример

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

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Выберите файл:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Загрузить</button>
      </form>
    
  

11.2 Атрибут multiple

Элемент <input type="file"> поддерживает несколько атрибутов, которые расширяют его функциональность. Рассмотрим два из них: multiple и accept.

Атрибут multiple дает возможность пользователям выбирать несколько файлов для загрузки. Когда этот атрибут добавлен, пользователи могут выбрать несколько файлов в диалоговом окне выбора файлов.

Пример использования:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Выберите файлы:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Загрузить</button>
      </form>
    
  

11.3 Атрибут accept

Атрибут accept ограничивает типы файлов, которые могут быть выбраны пользователем. Это полезно для обеспечения того, чтобы пользователи загружали только допустимые типы файлов (например, только изображения или документы).

Пример использования:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Выберите изображение:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Загрузить</button>
      </form>
    
  

Атрибут accept ограничивает типы файлов, которые могут быть выбраны. Это можно сделать по MIME-типам или расширениям файлов. В примере выше пользователи могут выбирать только файлы изображений.

Примеры значений атрибута accept

Ограничение по типу файла:

• accept="image/*": любые изображения
• accept="video/*": любые видеофайлы
• accept="audio/*": любые аудиофайлы

Ограничение по расширению файла:

• accept=".jpg/.jpeg/.png": только изображения в форматах JPEG и PNG
• accept=".pdf/.doc/.docx": только документы PDF и Word

11.4 Обработка файлов на клиентской стороне

Иногда требуется предварительная обработка файлов на клиентской стороне перед отправкой на сервер. Например, можно отображать предварительный просмотр изображений или проверять размер файла. Для этого используется JavaScript.

Пример предварительного просмотра изображения:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Выберите изображение:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Загрузить</button>
      </form>
    
  

    
      document.getElementById('image').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';

        const files = event.target.files;

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();

          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            preview.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      });
    
  

Объяснение

• FileReader: используется для чтения содержимого файлов на клиентской стороне
• reader.onload: событие, которое срабатывает, когда файл полностью прочитан
• reader.readAsDataURL(file): метод, который считывает файл и кодирует его как Data URL, что позволяет отображать его в теге <img>

1

Задача

Модуль 1: Web Core, 5 уровень, 10 лекция

Недоступна

Загрузка файла

Загрузка файла

Открыть

1

Задача

Модуль 1: Web Core, 5 уровень, 10 лекция

Недоступна

Загрузка изображений

Загрузка изображений

Открыть

1

Опрос

Элементы форм, 5 уровень, 10 лекция

Недоступен

Элементы форм

Элементы форм

Открыть