Завантаження файлів

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

Опитування

Елементи форм, рівень 9, лекція 5

Недоступний

Елементи форм

Елементи форм

Відкрити