Window: showOpenFilePicker() Methode - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Window: showOpenFilePicker() Methode

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die showOpenFilePicker()-Methode der Window-Schnittstelle zeigt einen Dateiauswahldialog an, der es einem Benutzer ermöglicht, eine oder mehrere Dateien auszuwählen und gibt ein Handle für die Datei(en) zurück.

In diesem Artikel

Syntax

js
showOpenFilePicker()
showOpenFilePicker(options)

Parameter

options Optional

Ein Objekt, das Optionen enthält, welche wie folgt sind:

excludeAcceptAllOption Optional

Ein boolescher Wert, der standardmäßig auf false gesetzt ist. Standardmäßig sollte der Dialog eine Option enthalten, um keine Dateityp-Filter anzuwenden (veranlasst durch die Typ-Option unten). Wenn diese Option auf true gesetzt ist, steht diese Option nicht zur Verfügung.

id Optional

Durch das Angeben einer ID kann der Browser verschiedene Verzeichnisse für verschiedene IDs speichern. Wenn dieselbe ID für einen anderen Dialog verwendet wird, öffnet sich dieser Dialog im selben Verzeichnis.

multiple Optional

Ein boolescher Wert, der standardmäßig auf false gesetzt ist. Wenn auf true gesetzt, können mehrere Dateien ausgewählt werden.

startIn Optional

Ein FileSystemHandle oder ein bekanntes Verzeichnis ("desktop", "documents", "downloads", "music", "pictures", oder "videos") in dem der Dialog geöffnet wird.

types Optional

Ein Array der erlaubten Dateitypen zur Auswahl. Jedes Element ist ein Objekt mit den folgenden Optionen:

description Optional

Eine optionale Beschreibung der Kategorie der erlaubten Dateitypen. Standardmäßig ist dies ein leerer String.

Ein Object mit den Schlüsseln, die auf den MIME-Typ gesetzt sind, und den Werten, die ein Array von Dateiendungen enthalten (siehe unten für ein Beispiel).

Rückgabewert

Ein Promise, dessen Abschluss-Handler ein Array von FileSystemFileHandle-Objekten erhält.

Ausnahmen

AbortError DOMException

Wird ausgelöst, wenn der Benutzer den Dialog schließt, ohne eine Auswahl zu treffen, oder wenn der Benutzeragent ausgewählte Dateien als zu sensibel oder gefährlich einstuft.

SecurityError DOMException

Wird ausgelöst, wenn der Aufruf durch die Same-Origin-Policy blockiert wurde oder wenn er nicht über eine Benutzerinteraktion wie einen Knopfdruck aufgerufen wurde.

TypeError

Wird ausgelöst, wenn die akzeptierten Typen nicht verarbeitet werden können, was in folgenden Fällen auftreten kann:

Ein beliebiger Schlüsselstring der accept-Optionen eines Elements in den types-Optionen kann keinen gültigen MIME-Typ parsen.
Ein beliebiger Wertstring der accept-Optionen eines Elements in den types-Optionen ist ungültig, beispielsweise wenn er nicht mit . beginnt und mit . endet, oder wenn er ungültige Codepunkte enthält und seine Länge mehr als 16 beträgt.
Die types-Optionen sind leer und die excludeAcceptAllOption-Optionen sind true.

Sicherheit

Vorübergehende Benutzeraktivierung ist erforderlich. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert.

Beispiele

Hier setzen wir das Optionsobjekt, das in die Methode übergeben wird. Wir erlauben eine Auswahl von Bild-Dateitypen, ohne die Option, alle Dateitypen oder eine Mehrfachauswahl zu erlauben.

js
const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

Als nächstes können wir eine asynchrone Funktion erstellen, die den Dateiauswahldialog anzeigt und die ausgewählte Datei zurückgibt.

js
// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden