Ładowanie plików

11.1 Element <input type="file">

Aplikacje webowe często wymagają od użytkowników ładowania plików na serwer. Może to być przydatne do ładowania dokumentów, obrazów, wideo i innych typów danych. HTML zapewnia element <input type="file"> do tworzenia interfejsów ładowania plików. Poniżej omówimy szczegółowo użycie tego elementu i jego atrybutów, takich jak multiple i accept.

Element <input type="file"> tworzy element interfejsu, który pozwala użytkownikom wybierać pliki z ich urządzenia i ładować je na serwer. To jeden z kluczowych elementów formularza w HTML, który pozwala integrować funkcjonalność ładowania plików w aplikacjach webowych.

Główne atrybuty elementu <input type="file">

1. type="file" — określa, że element jest przeznaczony do wyboru plików.
2. name — ustala nazwę elementu, która będzie używana przy wysyłaniu danych formularza na serwer.
3. multiple — pozwala użytkownikowi wybierać kilka plików jednocześnie.
4. accept — wskazuje typy plików, które można wybrać, używając typów MIME lub rozszerzeń plików.

Przykłady użycia elementu <input type="file">

Prosty przykład

Najprostszy przykład elementu do ładowania pliku bez dodatkowych atrybutów:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Wybierz plik:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Załaduj</button>
      </form>
    
  

11.2 Atrybut multiple

Element <input type="file"> obsługuje kilka atrybutów, które rozszerzają jego funkcjonalność. Przyjrzyjmy się dwóm z nich: multiple i accept.

Atrybut multiple daje możliwość użytkownikom wybierać kilka plików do ładowania. Kiedy ten atrybut jest dodany, użytkownicy mogą wybrać kilka plików w oknie dialogowym wyboru plików.

Przykład użycia:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Wybierz pliki:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Załaduj</button>
      </form>
    
  

11.3 Atrybut accept

Atrybut accept ogranicza typy plików, które mogą być wybrane przez użytkownika. To przydatne, aby zapewnić, że użytkownicy ładują tylko dopuszczalne typy plików (np. tylko obrazy lub dokumenty).

Przykład użycia:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Wybierz obraz:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Załaduj</button>
      </form>
    
  

Atrybut accept ogranicza typy plików, które mogą być wybrane. Można to zrobić według typów MIME lub rozszerzeń plików. W powyższym przykładzie użytkownicy mogą wybierać tylko pliki obrazów.

Przykłady wartości atrybutu accept

Ograniczenie według typu pliku:

• accept="image/*": dowolne obrazy
• accept="video/*": dowolne pliki wideo
• accept="audio/*": dowolne pliki dźwiękowe

Ograniczenie według rozszerzenia pliku:

• accept=".jpg/.jpeg/.png": tylko obrazy w formatach JPEG i PNG
• accept=".pdf/.doc/.docx": tylko dokumenty PDF i Word

11.4 Przetwarzanie plików po stronie klienta

Czasami konieczne jest wstępne przetwarzanie plików po stronie klienta przed wysłaniem na serwer. Na przykład, można wyświetlać podgląd obrazów lub sprawdzać rozmiar pliku. Do tego używamy JavaScript.

Przykład podglądu obrazu:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Wybierz obraz:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Załaduj</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);
        }
      });
    
  

Wyjaśnienie

• FileReader: używany do odczytu zawartości plików po stronie klienta
• reader.onload: zdarzenie, które wywołuje się, gdy plik jest całkowicie odczytany
• reader.readAsDataURL(file): metoda, która odczytuje plik i koduje go jako Data URL, co pozwala na wyświetlenie go w tagu <img>

1

Опрос

Elementy formularzy,  9 уровень,  5 лекция

недоступен

Elementy formularzy

Elementy formularzy

Открыть