Schnellstart: Dateizugriff mit Dateiauswahl (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Greifen Sie auf Dateien und Ordner über die Dateiauswahl zu, indem Benutzer Dateien und Ordner auswählen können. Mithilfe der fileOpenPicker-Klasse können Sie auf Dateien und mithilfe der folderPicker-Klasse auf Ordner zugreifen.

Voraussetzungen

Kenntnisse in der asynchronen Programmierung für Windows-Runtime-Apps mit JavaScript

Unter Schnellstart: Verwenden von Zusagen in JavaScript erfahren Sie, wie Sie asynchrone Apps erstellen.

Dateiauswahl – Benutzeroberfläche

Die Dateiauswahl weist Bereiche oben und unten auf dem Bildschirm mit Informationen zur Orientierung von Benutzern auf, die für eine einheitliche Erfahrung beim Zugreifen auf oder Speichern von Dateien sorgen.

Es werden u. a. die folgenden Informationen angezeigt:

Die aktuelle Position, in der Ecke oben links
Ein Korb der vom Benutzer ausgewählten Elemente, am unteren Rand
Eine Dropdownliste der Speicherorte, die der Benutzer durchsuchen kann und die über das Caretzeichen nach unten in der Ecke oben links ausgewählt werden kann

Dieses Bildschirmfoto beispielsweise zeigt eine Dateiauswahl, die aufgerufen wurde, um dem Benutzer die Auswahl einiger Dateien zu ermöglichen. Auf dem Bildschirmfoto hat der Benutzer zwei Dateien ausgewählt. Ein Bildschirmfoto der Dateiauswahl, in der zwei Dateien zum Öffnen ausgewählt sind.

Der Benutzer kann die Dropdownliste der verfügbaren Speicherorte anzeigen (wie die Liste auf dem Bildschirmfoto rechts), indem er das Caretzeichen nach unten in der Ecke oben links in der Dateiauswahl auswählt. Diese Speicherorte umfassen auch Dateisystempfade, etwa den Ordner "Musik" oder den Ordner "Downloads". Auch andere Apps sind enthalten, sofern sie (wie zum Beispiel Microsoft OneDrive) an Verträgen für die Dateiauswahl teilnehmen. Diese können Sie unten in der Liste auf dem Bildschirmfoto sehen.

Ein abgeschnittenes Bildschirmfoto der Dateiauswahl, das in der oberen linken Ecke eine Dropdownliste mit Speicherorten zeigt.

Vollständiger Code zur Auswahl einer Datei

Im Beispiel zur Dateiauswahl wird demonstriert, wie fileOpenPicker verwendet werden kann, um dem Benutzer die Auswahl einer einzelnen Datei zu ermöglichen.

// Create the picker object and set options
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

// Open the picker for the user to pick a file
openPicker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // Application now has read/write access to the picked file
        WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

Den vollständigen Code zur Auswahl mehrerer Dateien erhalten Sie ebenfalls im Beispiel zur Dateiauswahl.

Vorgehensweise zur Auswahl einer Datei

Das Aufrufen der Dateiauswahl erfordert zwei grundlegende Schritte: Erstellen und Anpassen eines Dateiauswahlobjekts und Einblenden der Dateiauswahl, sodass der Benutzer ein oder mehrere Elemente auswählen kann.

Erstellen und Anpassen eines FileOpenPicker

Verwenden Sie fileOpenPicker, wenn der Benutzer eine oder mehrere Dateien auswählt. Sie können diese Klasse durch die Festlegung von Eigenschaften für das Objekt, das Sie erstellen, anpassen.

Im Beispiel zur Dateiauswahl wird veranschaulicht, wie Sie einen fileOpenPicker erstellen und anpassen.
```
// Create the picker object and set options
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
```
Sie sollten die Eigenschaften für das Dateiauswahlobjekt festlegen, die für Ihre Benutzer und Ihre App relevant sind. Richtlinien zur Anpassung der Dateiauswahl erhalten Sie in Richtlinien und Prüfliste für die Dateiauswahl. Weitere Informationen dazu, warum wir bestimmte Eigenschaften zur Anpassung der Dateiauswahl im Beispiel zur Dateiauswahl festlegen, erhalten Sie im Folgenden.

FileOpenPicker-Anpassungen im Beispiel zur Dateiauswahl: Erklärung

Das Beispiel zur Dateiauswahl bietet eine ansprechende visuelle Darstellung von Bildern an einem bequemen Ort, an dem sich der Benutzer bedienen kann, indem drei fileOpenPicker-Eigenschaften festgelegt werden: viewMode, suggestedStartLocation und fileTypeFilter.
- Wenn der openPicker.viewMode auf den thumbnail-PickerViewMode-Enumerationswert festgelegt wird, entsteht eine ansprechende visuelle Darstellung, da Miniaturbilder als Darstellung für die Dateien in der Dateiauswahl erscheinen.
```
openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
```
  Zudem ist es empfehlenswert, viewMode auf PickerViewMode.thumbnail festzulegen, falls Sie die Dateiauswahl dazu verwenden, visuelle Dateien wie Bilder oder Videos einzublenden. Nutzen Sie ansonsten PickerViewMode.list.
  
  In manchen Fällen möchte der Benutzer möglicherweise ein Bild, ein Video oder einen anderen Dateityp auswählen. Beispielsweise könnte er nach einer Datei suchen, um diese an eine E-Mail anzuhängen oder sie per Sofortnachricht zu verschicken. In diesem Fall sollten Sie beide Ansichtsmodi unterstützen, indem Sie Ihrer App zwei UI-Steuerelemente hinzufügen. Eines sollte die Dateiauswahl im thumbnail-Ansichtsmodus aufrufen, sodass der Benutzer Bilder und Videos auswählen kann. Das andere sollte sie im list-Ansichtsmodus aufrufen, um dem Benutzer zu ermöglichen, andere Arten von Dateien auszuwählen. So würde eine Nachrichten-App etwa zwei Schaltflächen aufweisen: Bild oder Video anhängen und Dokument anhängen.
- Wenn openPicker.suggestedStartLocation mithilfe von PickerLocationId.picturesLibrary auf Bilder festgelegt wird, beginnt der Benutzer in einem Pfad, der mit hoher Wahrscheinlichkeit Bilder enthält.
```
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
```
  Sie sollten suggestedStartLocation auf einen Pfad im Dateisystem festlegen, der zum Dateityp passt, der ausgewählt wird. Soll der Benutzer also Musik, Bilder oder Videos auswählen, stellen Sie den Ausgangspfad auf Musik, Bilder bzw. Videos ein. Für alle weitere Dateitypen sollten Sie den Ausgangspfad auf die Dokumente festlegen. Hierbei handelt es sich lediglich um eine Ausgangsposition. Benutzer haben die Möglichkeit, andere Speicherorte aufzusuchen, während sie die Dateiauswahl verwenden.
  
  Zudem kommt suggestedStartLocation nicht immer als Ausgangspfad in der Dateiauswahl zum Einsatz. Damit beim Benutzer eine Art Konsistenz gewährleistet ist, merkt sich die Dateiauswahl den letzten Speicherort, den der Benutzer aufgerufen hat, und beginnt die Navigation in der Regel wieder dort.
- Indem wir openPicker.fileTypeFilter.replaceAll verwenden, um die Dateitypen festzulegen, die dem Benutzer angezeigt werden, gewährleisten wir, dass er nicht durch irrelevante und ungeeignete Inhalte abgelenkt wird.
```
openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);
```
  Sie sollten in Erwägung ziehen, die in der Dateiauswahl anzuzeigenden Dateitypen anzugeben, um die Relevanz der verfügbaren Dateien zu gewährleisten. Wenn es sich bei Ihrer App beispielsweise um einen Videoplayer handelt, können Sie mithilfe der fileTypeFilter-Eigenschaft auf Grundlage der Video-Dateinamenerweiterung gewährleisten, dass die in der Dateiauswahl angezeigten Dateien Videoformate sind, die von Ihrem Player unterstützt werden.
  
  Wenn Sie Dateitypen zum fileTypeFilter hinzufügen möchten, statt Einträge zu ersetzen, können Sie statt append die replaceAll-Methode verwenden.
Einblenden des FileOpenPicker

Sie können die Dateiauswahl so einblenden, dass der Benutzer entweder eine oder mehrere Dateien auswählen kann:
- Einblenden zur Auswahl einer einzelnen Datei
  
  Nachdem Sie die Dateiauswahl erstellt und angepasst haben, können Sie es den Benutzern durch Aufrufen von fileOpenPicker.pickSingleFileAsync ermöglichen, eine Datei auszuwählen. Wählt der Benutzer eine Datei aus, wird von fileOpenPicker.pickSingleFileAsync ein storageFile-Objekt zurückgegeben, das die ausgewählte Datei darstellt.
  
  Im Beispiel zur Dateiauswahl wird veranschaulicht, wie Sie die Dateiauswahl zum Auswählen einer Datei anzeigen und wie die ausgewählte Datei für die Verarbeitung erfasst wird.
```
// Open the picker for the user to pick a file
openPicker.pickSingleFileAsync().then(function (file) {
    if (file) {
        // Application now has read/write access to the picked file
        WinJS.log && WinJS.log("Picked photo: " + file.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});
```
  Wenn der openPicker.pickSingleFileAsync-Aufruf abgeschlossen ist, wird die ausgewählte Datei (dargestellt durch ein storageFile-Objekt) zur Verarbeitung als file-Parameter an ein Funktionsliteral übergeben. Falls der Vorgang abgebrochen und keine Auswahl getroffen wurde, ist der Parameter null.
- Einblenden zur Auswahl mehrerer Dateien
  
  Nachdem Sie eine Dateiauswahl erstellt und angepasst haben, können Sie es den Benutzern durch Aufrufen von fileOpenPicker.pickMultipleFilesAsync ermöglichen, mehrere Dateien auszuwählen.
  
  Wählt der Benutzer mehrere Dateien aus, wird von fileOpenPicker.pickMultipleFilesAsync eine Liste von storageFile-Objekten zurückgegeben, die die ausgewählten Dateien darstellen.
  
  Im Beispiel zur Dateiauswahl wird veranschaulicht, wie Sie die Dateiauswahl zum Auswählen mehrerer Dateien anzeigen und wie die Liste der ausgewählten Dateien für die Verarbeitung erfasst wird.
```
openPicker.pickMultipleFilesAsync().then(function (files) {
    if (files.size > 0) {
        // Application now has read/write access to the picked file(s)
        var outputString = "Picked files:\n";
        for (var i = 0; i < files.size; i++) {
            outputString = outputString + files[i].name + "\n";
        }
        WinJS.log && WinJS.log(outputString, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});
```
  Wenn der openPicker.pickMultipleFilesAsync-Aufruf abgeschlossen ist, wird die Liste der ausgewählten Dateien zur Verarbeitung als files-Parameter an ein Funktionsliteral übergeben. Die ausgewählten Dateien in der Liste werden von storageFile-Objekten dargestellt. Falls der Vorgang abgebrochen und keine Auswahl getroffen wurde, ist die Größe des Parameters größer als 0.

Vollständiger Code zur Auswahl eines Ordners

Im Beispiel zur Dateiauswahl wird demonstriert, wie folderPicker verwendet werden kann, um dem Benutzer die Auswahl eines einzelnen Ordners zu ermöglichen.

// Verify that we are currently not snapped, or that we can unsnap to open the picker
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
    !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
    // Fail silently if we can't unsnap
    return;
}

// Create the picker object and set options
var folderPicker = new Windows.Storage.Pickers.FolderPicker;
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);

folderPicker.pickSingleFolderAsync().then(function (folder) {
    if (folder) {
        // Application now has read/write access to all contents in the picked folder (including sub-folder contents)
        // Cache folder so the contents can be accessed at a later time
        Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);
        WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

Vorgehensweise zur Auswahl eines Ordners

Erstellen und Anpassen eines FolderPicker

Verwenden Sie folderPicker, wenn der Benutzer einen Ordner auswählt. Sie können diese Klasse durch die Festlegung von Eigenschaften für das Objekt, das Sie erstellen, anpassen.

Im Beispiel zur Dateiauswahl wird veranschaulicht, wie Sie einen folderPicker erstellen und anpassen.
```
// Create the picker object and set options
var folderPicker = new Windows.Storage.Pickers.FolderPicker;
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
// Users expect to have a filtered view of their folders depending on the scenario.
// For example, when choosing a documents folder, restrict the filetypes to documents for your application.
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);
```
Sie sollten die Eigenschaften für das Dateiauswahlobjekt festlegen, die für Ihre Benutzer und Ihre App relevant sind. Richtlinien zur Anpassung der Dateiauswahl erhalten Sie in Richtlinien und Prüfliste für die Dateiauswahl. Weitere Informationen dazu, warum wir bestimmte Eigenschaften zur Anpassung der Dateiauswahl im Beispiel zur Dateiauswahl festlegen, erhalten Sie im Folgenden.

FolderPicker-Anpassungen im Beispiel zur Dateiauswahl: Erklärung

Im Beispiel zur Dateiauswahl wird die Dateiauswahl für die Auswahl von Ordnern mithilfe von drei folderPicker-Eigenschaften angepasst: viewMode, suggestedStartLocation und fileTypeFilter.
- Indem wir die Standard-PickerViewMode.list für den folderPicker.viewMode verwenden, können wir für eine listenähnliche Ansicht in der Dateiauswahl sorgen. Dies ist bei der Auswahl von Dateien vorteilhaft, die keine charakteristische Optik haben, etwa bei Dokumenten.
  
  Zudem ist es empfehlenswert, viewMode auf PickerViewMode.thumbnail festzulegen, falls Sie die Dateiauswahl dazu verwenden, visuelle Dateien wie Bilder oder Videos einzublenden. Nutzen Sie ansonsten PickerViewMode.list.
  
  Wenn Sie visuelle Dateien wie Bilder und Videos einblenden, sollten Sie den folderPicker.viewMode auf thumbnail einstellen:
```
folderPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
```
- Wenn Sie folderPicker.suggestedStartLocation auf den Desktop des Benutzers einstellen, indem Sie PickerLocationId.desktop verwenden, sorgen Sie dafür, dass er die Navigation an einem vertrauten, häufig verwendeten Ort beginnt.
```
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
```
  Sie sollten suggestedStartLocation auf einen Pfad im Dateisystem festlegen, der zur Art des Ordners passt, den der Benutzer auswählen möchte. Wenn der Benutzer beispielsweise einen Ordner mit Musikdateien auswählt, sollten Sie den Ausgangspunkt auf Musik festlegen. Hierbei handelt es lediglich um eine Ausgangsposition. Benutzer haben die Möglichkeit, zu anderen Speicherorten zu wechseln, während sie die Dateiauswahl verwenden.
  
  Zudem kommt suggestedStartLocation nicht immer als Ausgangspfad in der Dateiauswahl zum Einsatz. Damit beim Benutzer eine Art Konsistenz gewährleistet ist, merkt sich die Dateiauswahl den letzten Speicherort, den der Benutzer aufgerufen hat, und beginnt die Navigation in der Regel wieder dort.
- Indem wir folderPicker.fileTypeFilter.replaceAll verwenden, um die Dateitypen festzulegen, die dem Benutzer angezeigt werden, gewährleisten wir, dass er nicht durch irrelevante Ordner abgelenkt wird.
```
folderPicker.fileTypeFilter.replaceAll([".docx", ".xlsx", ".pptx"]);
```
  Benutzer können Ordner nur über einen folderPicker auswählen. Sie sind nicht dazu in der Lage, einzelne Dateien auszuwählen. Die Sichtbarkeit relevanter Dateien im folderPicker hilft Benutzern jedoch dabei, festzustellen, welchen Ordner Sie importieren möchten. Wenn Sie den folderPicker zum Beispiel dazu verwenden, einen Speicherort anzugeben, von dem Bilder importiert werden sollen, hilft die Anzeige von Bilddateien dem Benutzer dabei, einen Überblick darüber zu erhalten, was importiert wird, wenn der Speicherort ausgewählt wird.
Einblenden des FolderPicker zur Auswahl eines einzelnen Ordners

Nachdem Sie einen folderPicker erstellt und angepasst haben, können Sie es den Benutzern durch Aufrufen von folderPicker.pickSingleFolderAsync ermöglichen, einen Ordner auszuwählen. Wählt der Benutzer einen Ordner aus, wird von folderPicker.pickSingleFolderAsync ein storageFolder-Objekt zurückgegeben, das den ausgewählten Ordner darstellt. Sie sollten diesen Ordner mithilfe von done erfassen und verarbeiten, sodass sich Ausnahmen richtig verteilen.

Im Beispiel zur Dateiauswahl wird veranschaulicht, wie Sie die Dateiauswahl zum Auswählen eines Ordners aufrufen und wie der ausgewählte Ordner für die Verarbeitung erfasst wird.
```
folderPicker.pickSingleFolderAsync().then(function (folder) {
    if (folder) {
        // Application now has read/write access to all contents in the picked folder (including sub-folder contents)
        // Cache folder so the contents can be accessed at a later time
        Windows.Storage.AccessCache.StorageApplicationPermissions.futureAccessList.addOrReplace("PickedFolderToken", folder);
        WinJS.log && WinJS.log("Picked folder: " + folder.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});
```
Wenn der folderPicker.pickSingleFolderAsync-Aufruf abgeschlossen ist, wird der ausgewählte Ordner zur Verarbeitung als folder-Parameter an ein Funktionsliteral übergeben. Der ausgewählte Ordner wird durch ein storageFolder-Objekt dargestellt. Falls der Vorgang abgebrochen und keine Auswahl getroffen wurde, ist der Parameter null.

Zusammenfassung und nächste Schritte

Wenn Sie einen ähnlichen Code wie den hier verwendeten benutzen, blendet Ihre App eine Dateiauswahl ein, in der Benutzer eine oder mehrere Dateien oder Ordner auswählen können, die Ihre App anschließend öffnen kann.

Tipp Fügen Sie die Datei oder den Ordner für eine Nachverfolgbarkeit zur futureAccessList oder mostRecentlyUsedList der App hinzu, wenn Ihre App auf eine Datei oder einen Ordner über die Dateiauswahl zugreift. Weitere Informationen zur Verwendung dieser Listen finden Sie in So wird's gemacht: Nachverfolgen kürzlich verwendeter Dateien und Ordner.

Informationen zum Lesen und Schreiben von Dateien finden Sie in Schnellstart: Lesen und Schreiben einer Datei und im Beispiel zum Dateizugriff. Weitere Informationen dazu, wie Sie mit Bilddateien arbeiten, erhalten Sie in So wird's gemacht: Auswählen und Anzeigen von Bildern, Decodieren von Bildern und dem Beispiel zum Speichern und Laden von Inhalten mithilfe eines Blobs.

Wenn Sie weitere Informationen über das Aufrufen der Dateiauswahl zum Speichern von Dateien benötigen, finden Sie diese unter So wird's gemacht: Speichern von Dateien über die Dateiauswahl.

Wenn Ihre App Dateien, einen Speicherort oder Dateiupdates für andere Apps bereitstellen soll, finden Sie Informationen dazu unter Schnellstart: Integration mit Verträgen für die Dateiauswahl.