Limited availability
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.
showOpenFilePicker()
showOpenFilePicker(options)
Parameter
options
Optional
Ein Objekt, das Optionen enthält, die wie folgt sind:
excludeAcceptAllOption
Optional
Ein boolescher Wert, der standardmäÃig auf false
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 auf true
gesetzt wird, ist diese Option nicht verfügbar.
id
Optional
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.
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 werden soll.
types
Optional
Ein Array
von erlaubten Dateitypen zur Auswahl. Jedes Element ist ein Objekt mit den folgenden Optionen:
Ein Promise
, dessen Fulfillment-Handler ein Array
von FileSystemFileHandle
-Objekten erhält.
AbortError
DOMException
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.
SecurityError
DOMException
Wird ausgelöst, wenn der Aufruf durch die Same-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:
accept
-Optionen eines Elements in den types
-Optionen keinen gültigen MIME-Typ parsen kann.accept
-Optionen eines Elements in den types
-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.types
-Optionen leer sind und die excludeAcceptAllOption
-Optionen true
sind.Vorübergehende Benutzeraktivierung ist erforderlich. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert.
BeispieleHier 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 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 Browser-Kompatibilität Siehe auch
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