DieshowOpenFilePicker() Methode derWindow-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.

Syntax

showOpenFilePicker()showOpenFilePicker(options)

Parameter

optionsOptional

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

excludeAcceptAllOptionOptional

Ein boolescher Wert, der standardmäßig auffalse gesetzt ist. Standardmäßig sollte der Picker eine Option beinhalten, um keine Dateitypfilter anzuwenden (ausgelöst mit der unten genannten Typ-Option). Wenn diese Option auftrue gesetzt wird, ist diese Optionnicht verfügbar.

idOptional

Durch die Angabe einer ID kann der Browser verschiedene Verzeichnisse für unterschiedliche IDs merken. Wenn dieselbe ID für einen anderen Picker verwendet wird, öffnet sich der Picker im gleichen Verzeichnis.

multipleOptional

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

startInOptional

EinFileSystemHandle oder ein bekanntes Verzeichnis ("desktop","documents","downloads","music","pictures" oder"videos") in dem der Dialog geöffnet werden soll.

typesOptional

EinArray von erlaubten Dateitypen zur Auswahl. Jedes Element ist ein Objekt mit den folgenden Optionen:

descriptionOptional

Eine optionale Beschreibung der Kategorie der erlaubten Dateitypen. Standardwert ist ein leerer String.

accept

EinObject mit den Schlüsseln, die auf denMIME-Typ gesetzt sind, und den Werten alsArray von Dateiendungen (siehe unten für ein Beispiel).

Rückgabewert

EinPromise, dessen Fulfillment-Handler einArray vonFileSystemFileHandle-Objekten erhält.

Ausnahmen

AbortErrorDOMException

Wird ausgelöst, wenn der Benutzer die Eingabeaufforderung ohne Auswahl abbricht oder wenn der User-Agent feststellt, dass ausgewählte Dateien zu sensibel oder gefährlich sind.

SecurityErrorDOMException

Wird ausgelöst, wenn der Aufruf durch dieSame-Origin-Policy blockiert wurde oder nicht durch eine Benutzerinteraktion wie das Drücken eines Buttons erfolgt ist.

TypeError

Wird ausgelöst, wenn Akzeptanztypen nicht verarbeitet werden können, was passieren kann, wenn:

• Ein Schlüsselstring deraccept-Optionen eines Elements in dentypes-Optionen keinen gültigen MIME-Typ parsen kann.
• Ein Wertstring deraccept-Optionen eines Elements in dentypes-Optionen ungültig ist, zum Beispiel, 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.
• Dietypes-Optionen leer sind und dieexcludeAcceptAllOption-Optionentrue sind.

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 für den Aufruf der Methode. Wir erlauben die Auswahl von Bilddateitypen, ohne Option, alle Dateitypen zuzulassen oder mehrere Dateien auszuwählen.

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.

// create a reference for our file handlelet fileHandle;async function getFile() {  // open file picker, destructure the one element returned array  [fileHandle] = await window.showOpenFilePicker(pickerOpts);  // run code with our fileHandle}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• File System API
• The File System Access API: simplifying access to local files