Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/HTML/Reference/Elements/input/file below:

<input type="file"> - HTML | MDN

Baseline Widely available

<input>-Elemente mit type="file" ermöglichen es dem Benutzer, eine oder mehrere Dateien aus dem Gerätespeicher auszuwählen. Einmal ausgewählt, können die Dateien über Formularübermittlung hochgeladen oder mit JavaScript-Code und der File API manipuliert werden.

<label for="avatar">Choose a profile picture:</label>

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Das value-Attribut eines Dateieingabefeldes enthält einen String, der den Pfad zu den ausgewählten Dateien repräsentiert. Wenn noch keine Datei ausgewählt ist, ist der Wert ein leerer String (""). Wenn der Benutzer mehrere Dateien ausgewählt hat, repräsentiert der value die erste Datei in der Liste der ausgewählten Dateien. Die anderen Dateien können mit Hilfe der HTMLInputElement.files-Eigenschaft des Eingabefeldes identifiziert werden.

Hinweis: Der Wert ist immer der Dateiname, dem C:\fakepath\ vorangestellt ist, was nicht der echte Pfad der Datei ist. Dies ist, um bösartige Software daran zu hindern, die Dateistruktur des Benutzers zu erraten.

Zusätzlich zu den gemeinsamen Attributen, die alle <input>-Elemente teilen, unterstützen Eingabefelder vom Typ file auch die folgenden Attribute.

Der Wert des accept-Attributs ist ein String, der die Dateitypen definiert, die das Dateieingabefeld akzeptieren soll. Dieser String ist eine durch Kommas getrennte Liste von einzigartigen Dateityp-Spezifizierern. Da ein gegebener Dateityp auf mehr als eine Weise identifiziert werden kann, ist es nützlich, eine umfassende Menge von Typenspezifizierern bereitzustellen, wenn Dateien eines bestimmten Formats benötigt werden.

Beispielsweise gibt es eine Reihe von Möglichkeiten, Microsoft Word-Dateien zu identifizieren, daher könnte eine Website, die Word-Dateien akzeptiert, ein <input> wie dieses verwenden:

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

Der Wert des capture-Attributs ist ein String, der spezifiziert, welche Kamera für die Erfassung von Bild- oder Videodaten verwendet werden soll, wenn das accept-Attribut angibt, dass die Eingabe eine dieser Arten sein soll. Ein Wert von user bedeutet, dass die nach vorne gerichtete Kamera und/oder das Mikrofon benutzt werden sollen. Ein Wert von environment spezifiziert, dass die nach außen gerichtete Kamera und/oder das Mikrofon verwendet werden sollen. Wenn dieses Attribut fehlt, steht es der Nutzeragent frei, selbst zu entscheiden, was zu tun ist. Wenn der angeforderte Aufnahmemodus nicht verfügbar ist, kann der Nutzeragent auf seinen bevorzugten Standardmodus zurückgreifen.

Hinweis: capture war früher ein Boolesches Attribut, das, wenn vorhanden, verlangte, dass die Medienerfassungsgeräte des Geräts, wie Kamera oder Mikrofon, genutzt werden, anstatt eine Dateiauswahl anzufordern.

Wenn das multiple-Boolesche Attribut angegeben ist, erlaubt das Dateieingabefeld dem Benutzer, mehr als eine Datei auszuwählen.

Zusätzlich zu den oben aufgeführten Attributen stehen in einigen Browsern die folgenden nicht-standardmäßigen Attribute zur Verfügung. Sie sollten nach Möglichkeit vermeiden, diese zu verwenden, da dies die Fähigkeit Ihres Codes einschränkt, in Browsern zu funktionieren, die sie nicht implementieren.

Das Boolesche webkitdirectory-Attribut, falls vorhanden, bedeutet, dass nur Verzeichnisse in der Dateiauswahloberfläche vom Benutzer ausgewählt werden können. Siehe HTMLInputElement.webkitdirectory für zusätzliche Details und Beispiele.

Ein einzigartiger Dateityp-Spezifizierer ist ein String, der eine Art Datei beschreibt, die vom Benutzer in einem <input>-Element vom Typ file ausgewählt werden kann. Jeder einzigartige Dateityp-Spezifizierer kann eine der folgenden Formen annehmen:

• Eine gültige, nicht fallunterscheidende Dateinamenserweiterung, die mit einem Punkt (".") beginnt. Zum Beispiel: .jpg, .pdf oder .doc.
• Ein gültiger MIME-Typ-String, ohne Erweiterungen.
• Der String audio/*, was "jede Audiodatei" bedeutet.
• Der String video/*, was "jede Videodatei" bedeutet.
• Der String image/*, was "jede Bilddatei" bedeutet.

Das accept-Attribut nimmt einen String, der einen oder mehrere dieser einzigartigen Dateityp-Spezifizierer als Wert enthält, getrennt durch Kommas. Zum Beispiel könnte ein Dateiauswahlfeld, das Inhalte benötigt, die als Bild dargestellt werden können, einschließlich sowohl standardmäßiger Bildformate als auch PDF-Dateien, so aussehen:

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Dies erzeugt die folgende Ausgabe:

Hinweis: Sie finden dieses Beispiel auch auf GitHub — sehen Sie sich den Quellcode an und sehen Sie es live.

Unabhängig vom Gerät oder Betriebssystem des Benutzers bietet das Datei-Eingabefeld eine Schaltfläche, die ein Dateiauswahldialog öffnet, das dem Benutzer ermöglicht, eine Datei auszuwählen.

Die Einbeziehung des multiple-Attributs, wie oben gezeigt, gibt an, dass mehrere Dateien auf einmal ausgewählt werden können. Der Benutzer kann Dateien auf jede Weise auswählen, die seine gewählte Plattform erlaubt (z. B. durch Drücken der Shift- oder Control-Taste und dann Klicken). Wenn Sie möchten, dass der Benutzer nur eine Datei pro <input> auswählt, lassen Sie das multiple-Attribut weg.

Die ausgewählten Dateien werden durch die HTMLInputElement.files-Eigenschaft des Elements zurückgegeben, die ein FileList-Objekt ist, das eine Liste von File-Objekten enthält. Die FileList verhält sich wie ein Array, so dass Sie seine length-Eigenschaft überprüfen können, um die Anzahl der ausgewählten Dateien zu erhalten.

Jedes File-Objekt enthält die folgenden Informationen:

name

Der Name der Datei.

lastModified

Eine Zahl, die das Datum und die Uhrzeit angibt, zu der die Datei zuletzt geändert wurde, in Millisekunden seit dem UNIX-Epoche (1. Januar 1970, bei Mitternacht).

lastModifiedDate Veraltet

Ein Date-Objekt, das das Datum und die Uhrzeit angibt, zu der die Datei zuletzt geändert wurde. Dies ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen lastModified.

size

Die Größe der Datei in Bytes.

type

Der MIME-Typ der Datei.

webkitRelativePath Nicht standardisiert

Ein String, der den relativen Pfad der Datei im Basisverzeichnis angibt, das in einer Verzeichnisauswahl ausgewählt wurde (also einem file-Auswahlfeld, in dem das webkitdirectory-Attribut gesetzt ist). Dies ist nicht standardmäßig und sollte mit Vorsicht verwendet werden.

Oft möchten Sie nicht, dass der Benutzer einen beliebigen Dateityp auswählen kann; stattdessen möchten Sie oft, dass er Dateien eines bestimmten Typs oder bestimmter Typen auswählt. Zum Beispiel, wenn Ihr Datei-Eingabefeld es den Benutzern ermöglicht, ein Profilbild hochzuladen, möchten Sie wahrscheinlich, dass sie webkompatible Bildformate auswählen, wie JPEG oder PNG.

Akzeptable Dateitypen können mit dem accept-Attribut angegeben werden, das eine durch Kommas getrennte Liste von erlaubten Dateierweiterungen oder MIME-Typen annimmt. Einige Beispiele:

• accept="image/png" oder accept=".png" — Akzeptiert PNG-Dateien.
• accept="image/png, image/jpeg" oder accept=".png, .jpg, .jpeg" — Akzeptiert PNG- oder JPEG-Dateien.
• accept="image/*" — Akzeptiert jede Datei mit einem image/* MIME-Typ. (Viele mobile Geräte lassen den Benutzer auch ein Bild mit der Kamera aufnehmen, wenn dies verwendet wird.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Akzeptiert alles, was wie ein MS Word-Dokument riecht.

Schauen wir uns ein vollständigeres Beispiel an:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Dies erzeugt eine ähnlich aussehende Ausgabe wie das vorherige Beispiel:

Hinweis: Sie können dieses Beispiel auch auf GitHub finden — sehen Sie sich den Quellcode an und sehen Sie es live.

Es sieht vielleicht ähnlich aus, aber wenn Sie versuchen, eine Datei mit diesem Feld auszuwählen, werden Sie sehen, dass die Dateiauswahl Sie nur die Dateien auswählen lässt, die im accept-Wert angegeben sind (die genaue Schnittstelle unterscheidet sich zwischen Browsern und Betriebssystemen).

Das accept-Attribut validiert nicht die Typen der ausgewählten Dateien; es bietet Hinweise für Browser, um Benutzer bei der Auswahl der richtigen Dateitypen zu leiten. Es ist in den meisten Fällen immer noch möglich, dass Benutzer eine Option im Dateiauswahlmenü aktivieren, die es ermöglicht, dies zu überschreiben und dann jede gewünschte Datei auszuwählen, und dann unkorrekte Dateitypen wählen.

Deshalb sollten Sie sicherstellen, dass das accept-Attribut durch eine entsprechende serverseitige Validierung unterstützt wird.

Das cancel-Ereignis wird ausgelöst, wenn der Benutzer seine Auswahl nicht ändert und die zuvor ausgewählten Dateien erneut auswählt. Das cancel-Ereignis wird auch ausgelöst, wenn das Dateiauswahl-Dialogfeld geschlossen oder über die "Abbrechen"-Schaltfläche oder die Escape-Taste abgebrochen wird.

Zum Beispiel wird der folgende Code eine Meldung in die Konsole ausgeben, wenn der Benutzer das Popup schließt, ohne eine Datei auszuwählen:

const elem = document.createElement("input");
elem.type = "file";
elem.addEventListener("cancel", () => {
  console.log("Cancelled.");
});
elem.addEventListener("change", () => {
  if (elem.files.length === 1) {
    console.log("File selected: ", elem.files[0]);
  }
});
elem.click();

1. Sie können den Wert eines Datei-Auswahlfelds nicht über ein Skript setzen – etwas wie das Folgende hat keine Wirkung:

   const input = document.querySelector("input[type=file]");
   input.value = "foo";
   

2. Wenn eine Datei mit einem <input type="file"> ausgewählt wird, wird der echte Pfad zur Quelldatei aus offensichtlichen Sicherheitsgründen nicht im value-Attribut der Eingabe angezeigt. Stattdessen wird der Dateiname angezeigt, dem C:\fakepath\ vorangestellt ist. Dafür gibt es einige historische Gründe, aber es wird in allen modernen Browsern unterstützt und ist tatsächlich in der Spezifikation definiert.

In diesem Beispiel werden wir einen etwas fortgeschritteneren Dateiauswahler präsentieren, der die in der HTMLInputElement.files-Eigenschaft verfügbaren Dateiinformationen nutzt und einige clevere Tricks zeigt.

Hinweis: Sie können den kompletten Quellcode für dieses Beispiel auf GitHub sehen — file-example.html (sehen Sie es auch live). Wir werden das CSS nicht erklären; der Fokus liegt auf dem JavaScript.

Zuerst schauen wir uns das HTML an:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

html {
  font-family: sans-serif;
}

form {
  background: #cccccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eeeeee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

Das ist ähnlich zu dem, was wir zuvor gesehen haben – nichts Besonderes, das kommentiert werden müsste.

Als nächstes gehen wir den JavaScript-Code durch.

In den ersten Zeilen des Skripts erhalten wir Referenzen auf das Formulareingabefeld selbst und das <div>-Element mit der Klasse .preview. Danach verstecken wir das <input>-Element – wir machen dies, weil Datei-Eingabefelder dazu neigen, hässlich, schwer zu stylen und uneinheitlich in ihrem Design über Browser hinweg zu sein. Sie können das input-Element aktivieren, indem Sie auf dessen <label> klicken, daher ist es besser, das input optisch zu verstecken und das Label wie einen Button zu stylen, damit der Benutzer weiß, dass er darauf interagieren muss, wenn er Dateien hochladen möchte.

const input = document.querySelector("input");
const preview = document.querySelector(".preview");

input.style.opacity = 0;

Hinweis: opacity wird verwendet, um das Datei-Eingabefeld zu verstecken, anstatt visibility: hidden oder display: none, weil assistierende Technologien die letzteren beiden Stile so interpretieren, dass das Datei-Eingabefeld nicht interaktiv ist.

Als nächstes fügen wir einen Ereignislistener zum Eingabefeld hinzu, um auf Änderungen seines ausgewählten Wertes zu hören (in diesem Fall, wenn Dateien ausgewählt werden). Der Ereignislistener ruft unsere benutzerdefinierte updateImageDisplay()-Funktion auf.

input.addEventListener("change", updateImageDisplay);

Wann immer die updateImageDisplay()-Funktion aufgerufen wird, führen wir aus:

• Eine while-Schleife, um den vorherigen Inhalt des Vorschau-<div>-Elements zu leeren.

• Wir greifen das FileList-Objekt, das die Informationen über alle ausgewählten Dateien enthält, und speichern es in einer Variablen namens curFiles.

• Wir prüfen, ob keine Dateien ausgewählt wurden, indem wir überprüfen, ob curFiles.length gleich 0 ist. Wenn dies der Fall ist, drucken wir eine Nachricht in das Vorschau-<div>-Element, dass keine Dateien ausgewählt wurden.

• Wenn Dateien ausgewählt wurden, gehen wir jede einzelne durch und drucken Informationen darüber in das Vorschau-<div>-Element. Zu beachten ist hier:

• Wir verwenden die benutzerdefinierte validFileType()-Funktion, um zu überprüfen, ob die Datei von korrektetyp ist (z. B. die im accept-Attribut angegebenen Bildtypen).

• Wenn dies der Fall ist, führen wir aus:

  • Ihren Namen und die Dateigröße in ein Listenitem innerhalb des vorherigen <div>-Elements drucken (erhalten von file.name und file.size). Die benutzerdefinierte returnFileSize()-Funktion gibt eine schön formatierte Version der Größe in Bytes/KB/MB zurück (standardmäßig berichtet der Browser die Größe in absoluten Bytes).
  • Eine Miniaturansicht des Bildes generieren, indem URL.createObjectURL(file) aufgerufen wird. Dann fügen wir das Bild auch ins Listenitem ein, indem wir ein neues <img> erstellen und sein src auf die Miniaturansicht setzen.

• Wenn der Dateityp ungültig ist, zeigen wir innerhalb eines Listenitems eine Nachricht an, die dem Benutzer mitteilt, dass er einen anderen Dateityp auswählen muss.

function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if (curFiles.length === 0) {
    const para = document.createElement("p");
    para.textContent = "No files currently selected for upload";
    preview.appendChild(para);
  } else {
    const list = document.createElement("ol");
    preview.appendChild(list);

    for (const file of curFiles) {
      const listItem = document.createElement("li");
      const para = document.createElement("p");
      if (validFileType(file)) {
        para.textContent = `File name ${file.name}, file size ${returnFileSize(
          file.size,
        )}.`;
        const image = document.createElement("img");
        image.src = URL.createObjectURL(file);
        image.alt = image.title = file.name;

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}

Die benutzerdefinierte validFileType()-Funktion nimmt ein File-Objekt als Parameter und verwendet Array.prototype.includes(), um zu prüfen, ob irgendein Wert im fileTypes mit der type-Eigenschaft der Datei übereinstimmt. Wenn eine Übereinstimmung gefunden wird, gibt die Funktion true zurück. Wenn keine Übereinstimmung gefunden wird, gibt sie false zurück.

// https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}

Die returnFileSize()-Funktion nimmt eine Zahl (in Bytes, von der aktuellen size-Eigenschaft der Datei) und wandelt sie in eine schön formatierte Größe in Bytes/KB/MB um.

function returnFileSize(number) {
  if (number < 1e3) {
    return `${number} bytes`;
  } else if (number >= 1e3 && number < 1e6) {
    return `${(number / 1e3).toFixed(1)} KB`;
  }
  return `${(number / 1e6).toFixed(1)} MB`;
}

Hinweis: Die "KB" und "MB"-Einheiten hier verwenden die SI-Präfix-Konvention von 1KB = 1000B, ähnlich wie macOS. Verschiedene Systeme stellen Dateigrößen unterschiedlich dar – zum Beispiel verwendet Ubuntu IEC-Präfixe, wobei 1KiB = 1024B, während RAM-Spezifikationen oft SI-Präfixe verwenden, um Potenzen von zwei darzustellen (1KB = 1024B). Aus diesem Grund haben wir 1e3 (1000) und 1e6 (100000) anstelle von 1024 und 1048576 verwendet. In Ihrer Anwendung sollten Sie das Maßeinheitensystem klar an Ihre Benutzer kommunizieren, wenn die genaue Größe wichtig ist.

const button = document.querySelector("form button");
button.addEventListener("click", (e) => {
  e.preventDefault();
  const para = document.createElement("p");
  para.append("Image uploaded!");
  preview.replaceChildren(para);
});

Das Beispiel sieht so aus; probieren Sie es aus:

[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)

• Verwendung von Dateien aus Webanwendungen — enthält eine Reihe anderer nützlicher Beispiele in Bezug auf <input type="file"> und die File API.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4