Dateien hochladen

11.1 Element <input type="file">

Web-Anwendungen erfordern oft, dass Nutzer Dateien auf den Server hochladen. Dies kann nützlich sein, um Dokumente, Bilder, Videos und andere Datentypen hochzuladen. HTML bietet das Element <input type="file"> an, um Datei-Upload-Interfaces zu erstellen. Unten betrachten wir die Verwendung dieses Elements und seiner Attribute wie multiple und accept detailliert.

Das Element <input type="file"> erstellt ein Interface-Element, das es den Nutzern erlaubt, Dateien von ihrem Gerät auszuwählen und auf den Server hochzuladen. Es ist eines der Schlüsselelemente eines Formulars in HTML, das die Integration von Datei-Upload-Funktionen in Web-Anwendungen ermöglicht.

Wesentliche Attribute des Elements <input type="file">

1. type="file" — gibt an, dass das Element zur Dateiauswahl gedacht ist.
2. name — legt den Namen des Elements fest, der beim Senden der Formulardaten an den Server verwendet wird.
3. multiple — erlaubt dem Benutzer, mehrere Dateien gleichzeitig auszuwählen.
4. accept — gibt die Dateitypen an, die mit MIME-Typen oder Dateiendungen ausgewählt werden können.

Beispiele zur Verwendung des Elements <input type="file">

Einfaches Beispiel

Ein einfaches Beispiel eines Dateiupload-Elements ohne zusätzliche Attribute:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Wähle eine Datei:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Hochladen</button>
      </form>
    
  

11.2 Attribut multiple

Das Element <input type="file"> unterstützt mehrere Attribute, die seine Funktionalität erweitern. Wir betrachten hier zwei davon: multiple und accept.

Das Attribut multiple ermöglicht es den Nutzern, mehrere Dateien zum Upload auszuwählen. Wenn dieses Attribut hinzugefügt wird, können Nutzer im Datei-Auswahldialog mehrere Dateien auswählen.

Beispiel für die Verwendung:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Wähle Dateien:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Hochladen</button>
      </form>
    
  

11.3 Attribut accept

Das Attribut accept beschränkt die Dateitypen, die der Nutzer auswählen kann. Das ist nützlich, um sicherzustellen, dass Nutzer nur zulässige Dateitypen hochladen (z.B. nur Bilder oder Dokumente).

Beispiel für die Verwendung:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Wähle ein Bild:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Hochladen</button>
      </form>
    
  

Das Attribut accept beschränkt die auswählbaren Dateitypen. Dies kann entweder durch MIME-Typen oder Dateiendungen geschehen. Im obigen Beispiel können Nutzer nur Bilddateien auswählen.

Beispiele für accept-Attributwerte

Einschränkung nach Dateityp:

• accept="image/*": alle Bilder
• accept="video/*": alle Videodateien
• accept="audio/*": alle Audiodateien

Einschränkung nach Dateiendung:

• accept=".jpg/.jpeg/.png": nur Bilder im JPEG- und PNG-Format
• accept=".pdf/.doc/.docx": nur PDF- und Word-Dokumente

11.4 Verarbeitung von Dateien auf der Clientseite

Manchmal ist eine Vorverarbeitung von Dateien auf der Clientseite erforderlich, bevor sie an den Server gesendet werden. Zum Beispiel kann ein Bildvorschau angezeigt oder die Dateigröße überprüft werden. Dafür wird JavaScript verwendet.

Beispiel einer Bildvorschau:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Wähle ein Bild:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Hochladen</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);
        }
      });
    
  

Erklärung

• FileReader: wird verwendet, um den Inhalt von Dateien auf der Clientseite zu lesen
• reader.onload: Ereignis, das ausgelöst wird, wenn die Datei vollständig gelesen wurde
• reader.readAsDataURL(file): Methode, die die Datei liest und sie als Data URL kodiert, was es ermöglicht, sie in einem <img>-Tag anzuzeigen

1

Umfrage/Quiz

Formularelemente, Level 9, Lektion 5

Nicht verfügbar

Formularelemente

Formularelemente

Öffnen