Window: showOpenFilePicker() Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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, bevor Sie diese produktiv verwenden.
Die showOpenFilePicker()
Methode des Window
-Interface zeigt einen Dateiauswahl-Dialog an, der es einem Benutzer ermöglicht, eine oder mehrere Dateien auszuwählen und einen Handle für die Datei(en) zurückgibt.
Syntax
showOpenFilePicker()
Parameter
options
Optional-
Ein Objekt, das Optionen enthält, die wie folgt sind:
excludeAcceptAllOption
Optional-
Ein boolescher Wert, der standardmäßig
false
ist. Standardmäßig sollte der Auswahldialog eine Option enthalten, um keine Dateitypfilter anzuwenden (initiiert mit der untenstehenden Typoption). Durch Setzen dieser Option auftrue
ist diese Option nicht verfügbar. id
Optional-
Durch Festlegen einer ID kann der Browser verschiedene Verzeichnisse für verschiedene IDs speichern. Wenn dieselbe ID für einen anderen Auswahldialog verwendet wird, öffnet sich der Dialog im selben Verzeichnis.
multiple
Optional-
Ein boolescher Wert, der standardmäßig
false
ist. Wenn auftrue
gesetzt, können mehrere Dateien ausgewählt werden. startIn
Optional-
Ein
FileSystemHandle
oder ein bekanntes Verzeichnis ("desktop"
,"documents"
,"downloads"
,"music"
,"pictures"
, oder"videos"
) zum Öffnen des Dialogs in diesem Verzeichnis. types
Optional-
Ein
Array
der zulässigen Dateitypen zur Auswahl. Jedes Element ist ein Objekt mit den folgenden Optionen:description
Optional-
Eine optionale Beschreibung der Kategorie der zulässigen Dateitypen. Standardmäßig ein leerer String.
accept
-
Ein
Object
mit den Schlüsseln, die auf den MIME-Typ gesetzt sind, und den Werten alsArray
von Dateierweiterungen (siehe unten für ein Beispiel).
Rückgabewert
Ein Promise
, dessen Erfüllungshandler 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 eine der ausgewählten Dateien für zu sensibel oder gefährlich hält.
SecurityError
DOMException
-
Wird ausgelöst, wenn der Aufruf durch die Same-Origin-Policy blockiert wurde oder nicht durch eine Benutzeraktion wie das Drücken einer Schaltfläche ausgelöst wurde.
TypeError
-
Wird ausgelöst, wenn akzeptierte Typen nicht verarbeitet werden können, was in folgenden Fällen passieren kann:
- Jeder Schlüsselstring der
accept
-Optionen eines Elements in dentypes
-Optionen kann keinen gültigen MIME-Typ analysieren. - Jeder Wertstring der
accept
-Optionen eines Elements in dentypes
-Optionen ist ungültig, zum Beispiel, wenn er nicht mit.
beginnt, wenn er mit.
endet, oder wenn er ungültige Codepunkte enthält und länger als 16 Zeichen ist. - Die
types
-Optionen sind leer und die OptionexcludeAcceptAllOption
isttrue
.
- Jeder Schlüsselstring der
Sicherheit
Temporäre 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 die Übergabe an die Methode. Wir erlauben eine Auswahl von Bilddateitypen, ohne die Möglichkeit, alle Dateitypen oder Mehrfachauswahl zu erlauben.
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 Dateiauswahl-Dialog anzeigt und die ausgewählte Datei zurückgibt.
// 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
}
Spezifikationen
Specification |
---|
File System Access # api-showopenfilepicker |
Browser-Kompatibilität
BCD tables only load in the browser