So wird’s gemacht: Hochladen von Binärdaten mit „WinJS.xhr“ (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]

Wenn Sie WinJS.xhr verwenden (das XMLHttpRequest umschließt), können Sie Binärdaten hochladen und herunterladen. Dieses Beispiel zeigt, wie Sie eine Bitmap aus Ihren Bildern hochladen. Die Windows-Runtime-Methode, mit der die Bitmap-Datei geöffnet wird, gibt einen IRandomAccessStream zurück, daher müssen Sie diesen mit MSApp.createBlobFromRandomAccessStream in ein Blob konvertieren.

Warnung Sie können jetzt mit XMLHttpRequest Objekte hoch- und herunterladen, die größer als ein paar MB sind, z. B. Blob-Objekte und FormData-Objekte, bei denen der Vorgang lange dauert. Da Apps jederzeit beendet werden können, sollten Sie für diese Vorgänge ggf. die Hintergrundübertragungs-APIs der Windows-Runtime verwenden. Weitere Informationen zum Hoch- und Herunterladen von Inhalten finden Sie unter So wird's gemacht: Hochladen einer Datei und So wird's gemacht: Herunterladen einer Datei. Allgemeine Informationen zu Hintergrundübertragungen finden Sie unter Transferring data in the background.

Voraussetzungen

In diesem Thema wird vorausgesetzt, dass Sie eine einfache App mit der Vorlage "Windows-Bibliothek für JavaScript" erstellen können. Informationen zum Erstellen der ersten App finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript.

Anweisungen

Schritt 1: Einrichten der App zum Zugriff auf "Bilder" und das Web

Bestimmte Funktionen müssen Apps explizit hinzugefügt werden, z. B. der Zugriff auf eine bestimmte Bibliothek auf der Festplatte oder Netzwerkzugriff. Weitere Informationen zu Funktionen finden Sie unter Deklaration der App-Funktionen und So wird's gemacht: Konfigurieren von Netzwerkfunktionen.

Erstellen Sie in Visual Studio eine leere JavaScript-App.
Öffnen Sie die Datei "package.appxmanifest", und wählen Sie die Registerkarte Funktionen aus.
Für die Windows-Version des Beispiels sollte die Funktion Internet (Client) bereits ausgewählt sein. Wenn dies nicht der Fall ist, wählen Sie sie jetzt aus. Falls die App als Client eine Verbindung mit Webdiensten in einem Heim- oder Arbeitsplatznetzwerk herstellen können muss, ist außerdem die Funktion Private Netzwerke (Client und Server) erforderlich.

Wählen Sie für die Windows Phone-Version des Beispiels die Funktion Internet (Client und Server) aus.

Hinweis Unter Windows Phone gibt es nur eine Netzwerkfunktion – Internet (Client und Server) –, die den Netzwerkzugriff komplett für die App aktiviert.
Wählen Sie die Funktion Bildbibliothek aus.

Schritt 2: Hochladen der Bitmap

Es gibt eine Reihe von asynchronen Methoden, die den Dateizugriff behandeln. Diese asynchronen Methoden werden wie jede andere Zusage in JavaScript behandelt.

Hinweis Weitere Informationen finden Sie unter Asynchrone Programmierung in JavaScript.

Fügen Sie im BODY-Abschnitt der Datei "default.html" ein DIV-Element hinzu, das Erfolg oder Fehlschlagen des Uploads meldet, und weisen Sie ihm die ID "picDiv" zu:
```
<div id="picDiv"></div>
```

Richten Sie im Code Verweise auf das DIV-Element und auf "Bilder" ein:

var picDiv = document.getElementById("picDiv");
var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;

Suchen Sie die gewünschte Datei in "Bilder". Sie könnten diese Datei einfach mit WinJS.xhr hochladen, aber jetzt nehmen wir an, dass Sie die Datei erneut codieren oder anders verarbeiten möchten. Öffnen Sie in der completeFile-Funktion der then-Klausel der getFileAsync-Methode die Datei mit openAsync. Führen Sie dann in der completeStream-Funktion der then-Klausel der openAsync-Methode die gewünschte Verarbeitung im geöffneten Dateistream durch. Dieser ist vom Typ IRandomAccessStream.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

Und jetzt zum Upload. WinJS.xhr (und XMLHttpRequest) nehmen keine Uploads vom Typ IRandomAccessStream an, daher müssen Sie den Stream in ein Blob konvertieren. Hierfür gibt es die Hilfsfunktion MSApp.createBlobFromRandomAccessStream. Sie können das resultierende Blob zur data-Option von WinJS.xhr hinzufügen. Sie können Erfolg oder Misserfolg des Uploads in der then-Klausel von WinJS.xhr behandeln.

picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(
        function completeStream(stream) {
            // Do processing. 
            var blob = MSApp.createBlobFromRandomAccessStream("image/bmp", stream);
            return WinJS.xhr({ type: "POST", url: <URI of the website>, data: blob });
        }).then(
            function (request) {
                picDiv.textContent = "uploaded file";
            }, 
            function (error) {
                picDiv.textContent = "error uploading file";
    });

Führen Sie die App aus. Sie sollten die Datei hochladen können.

So wird’s gemacht: Hochladen von Binärdaten mit „WinJS.xhr“ (HTML)

Voraussetzungen

Anweisungen

Schritt 1: Einrichten der App zum Zugriff auf "Bilder" und das Web

Schritt 2: Hochladen der Bitmap

Verwandte Themen

Zusätzliche Ressourcen