So wird’s gemacht: Hochladen einer Datei (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]

In diesem Abschnitt wird erläutert, wie Sie Daten bzw. eine Datei von einem Gerät in das Web hochladen.

Apps können mithilfe der in diesem Thema behandelten APIs mit Webdiensten interagieren, um verbreitete Medienformate wie Fotos, Musik und Videos zu verwenden oder zu teilen.

Bei großen streambasierten oder mehrteiligen Übertragungen (Videos, Musik und große Bilder), bei denen die App unter Umständen mehrmals angehalten wird und/oder das Netzwerk nicht immer verfügbar ist, kann Ihre App Background Transfer verwenden.

Allgemeine Informationen zu Hintergrundübertragungen finden Sie unter Übertragen von Daten im Hintergrund.

Voraussetzungen

Allgemeine Hilfe zum Erstellen einer Windows Store-App mit JavaScript finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript. Darüber hinaus werden in diesem Thema JavaScript-Zusagen zum Ausführen asynchroner Vorgänge verwendet. Weitere Informationen zu diesem Programmierungsmuster finden Sie unter Asynchrone Programmierung in JavaScript mit Zusagen.

Damit Ihre App im Netzwerk verwendet werden kann, müssen Sie die entsprechende Funktion in der Projektdatei Package.appxmanifest festlegen. Definitionen zu den einzelnen Netzwerkfunktionen finden Sie unter So wird's gemacht: Konfigurieren von Netzwerkisolationsfunktionen.

In den folgenden Beispielen zur Hintergrundübertragung wird JavaScript verwendet; diese Beispiele basieren auf dem Beispiel für eine Hintergrundübertragung.

Hintergrundübertragungen beim Hochladen

Bei der Hintergrundübertragung erfolgt der Upload als UploadOperation. Dabei wird eine Reihe von Steuerungsmethoden zum Neustarten oder Abbrechen des Vorgangs verfügbar gemacht. App-Ereignisse (z. B. Anhalten oder Beenden) und Konnektivitätsänderungen werden vom System automatisch durch UploadOperation behandelt. Uploads werden bei Anhalten oder Unterbrechen einer App und auch nach dem Beenden der App fortgesetzt. Außerdem wird durch Festlegen der CostPolicy-Eigenschaft angegeben, ob die App Uploads startet, wenn für die Internetkonnektivität ein getaktetes Netzwerk verwendet wird.

In den folgenden Beispielen werden die Erstellung und Initialisierung eines einfachen Uploads sowie das Aufzählen und Fortsetzen von in einer vorherigen App-Sitzung gespeicherten Vorgängen erläutert.

Hochladen einer Datei

Die Erstellung eines Uploads beginnt mit BackgroundUploader. Mit dieser Klasse werden die Methoden bereitgestellt, mit denen die App den Upload konfigurieren kann, bevor die resultierende UploadOperation erstellt wird. Im folgenden Beispiel wird gezeigt, wie Sie dies mit dem erforderlichen Uri- und StorageFile-Objekten durchführen.

Identifizieren der Datei und des Ziels für den Upload

Vor dem Erstellen einer UploadOperation müssen wir den URI des Speicherorts für den Upload und die hochzuladende Datei bestimmen. Im folgenden Beispiel wird der uriString-Wert mit einer Zeichenfolge aus der Benutzeroberflächeneingabe und der file-Wert mit dem StorageFile-Objekt gefüllt, das von einem PickSingleFileAsync-Vorgang zurückgegeben wird.

function uploadFile() {
    var filePicker = new Windows.Storage.Pickers.FileOpenPicker();
    filePicker.fileTypeFilter.replaceAll(["*"]);

    filePicker.pickSingleFileAsync().then(function (file) {
        if (!file) {
            printLog("No file selected");
            return;
        }

        var upload = new UploadOp();
        var uriString = document.getElementById("serverAddressField").value;
        upload.start(uriString, file);

        // Store the upload operation in the uploadOps array.
        uploadOperations.push(upload);
    });
}

Erstellen und Initialisieren des Uploadvorgangs

Im vorherigen Schritt wurden der uriString-Wert und der file-Wert an eine Instanz von UploadOp aus dem nächsten Beispiel übergeben. Dort werden sie zum Konfigurieren und Starten des neuen Uploadvorgangs verwendet. Zunächst wird uriString analysiert, um das erforderliche Uri-Objekt zu erstellen.

Dann verwendet BackgroundUploader die Eigenschaften der bereitgestellten StorageFile (file) zum Füllen des Anforderungsheaders und Festlegen der SourceFile-Eigenschaft mit dem StorageFile-Objekt. Anschließend wird die SetRequestHeader-Methode aufgerufen, um den als Zeichenfolge bereitgestellten Dateinamen und die StorageFile.Name-Eigenschaft einzufügen.

Schließlich erstellt BackgroundUploader die UploadOperation (upload).
```
function UploadOp() {
    var upload = null;
    var promise = null;

    this.start = function (uriString, file) {
        try {

            var uri = new Windows.Foundation.Uri(uriString);
            var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();

            // Set a header, so the server can save the file (this is specific to the sample server).
            uploader.setRequestHeader("Filename", file.name);

            // Create a new upload operation.
            upload = uploader.createUpload(uri, file);

            // Start the upload and persist the promise to be able to cancel the upload.
            promise = upload.startAsync().then(complete, error, progress);
        } catch (err) {
            displayError(err);
        }
    };
    // On application activation, reassign callbacks for a upload
    // operation persisted from previous application state.
    this.load = function (loadedUpload) {
        try {
            upload = loadedUpload;
            promise = upload.attachAsync().then(complete, error, progress);
        } catch (err) {
            displayError(err);
        }
    };
}
```
Beachten Sie die asynchronen Methodenaufrufe, die mit JavaScript-Zusagen definiert sind. Sehen Sie sich die folgende Zeile aus dem letzten Beispiel an:
```
promise = upload.startAsync().then(complete, error, progress);
```
Nach dem Async-Methodenaufruf folgt eine then-Anweisung, die von der App definierte Methoden angibt, die aufgerufen werden, wenn ein Ergebnis aus dem Async-Methodenaufruf zurückgegeben wird. Weitere Informationen zu diesem Programmierungsmuster finden Sie unter Asynchrone Programmierung in JavaScript mit Zusagen.

Hochladen mehrerer Dateien

Identifizieren der Dateien und des Ziels für den Upload

In einem Szenario, in dem mehrere Dateien mit einer einzigen UploadOperation übertragen werden, beginnt der Vorgang normalerweise zuerst mit der Bereitstellung des erforderlichen Ziel-URI und der lokalen Dateiinformationen. Ähnlich wie in dem Beispiel im vorherigen Abschnitt wird der URI als Zeichenfolge vom Endbenutzer angegeben, und mit dem FileOpenPicker kann auch die Möglichkeit bereitgestellt werden, Dateien in der Benutzeroberfläche auszuwählen. In diesem Szenario muss die App aber stattdessen die PickMultipleFilesAsync-Methode aufrufen, um die Auswahl mehrerer Dateien auf der Benutzeroberfläche zu ermöglichen.
```
function uploadFiles() {
   var filePicker = new Windows.Storage.Pickers.FileOpenPicker();
   filePicker.fileTypeFilter.replaceAll(["*"]);

   filePicker.pickMultipleFilesAsync().then(function (files) {
      if (files === 0) {
         printLog("No file selected");
            return;
      }

      var upload = new UploadOperation();
      var uriString = document.getElementById("serverAddressField").value;
      upload.startMultipart(uriString, files);

      // Persist the upload operation in the global array.
      uploadOperations.push(upload);
   });
}
```
Erstellen von Objekten für die verfügbaren Parameter

Die beiden nächsten Beispiele verwenden den Code, der in der Beispielmethode startMultipart enthalten ist, die am Ende des letzten Schritts aufgerufen wurde. Für diese Anleitung wurde der Code in der Methode, die ein Array mit BackgroundTransferContentPart-Objekten erstellt, von dem Code getrennt, der die resultierende UploadOperation erstellt.

Zuerst wird die vom Benutzer bereitgestellte URI-Zeichenfolge als Uri initialisiert. Danach wird das Array mit IStorageFile-Objekten (files), das an diese Methode übergeben wurde, durchlaufen, und aus jedem Objekt wird ein neues BackgroundTransferContentPart-Objekt erstellt, das dann in das contentParts-Array gesetzt wird.
```
upload.startMultipart = function (uriString, files) {
    try {
        var uri = new Windows.Foundation.Uri(uriString);
        var uploader = new Windows.Networking.BackgroundTransfer.BackgroundUploader();

        var contentParts = [];
        files.forEach(function (file, index) {
            var part = new Windows.Networking.BackgroundTransfer.BackgroundTransferContentPart("File" + index, file.name);
            part.setFile(file);
            contentParts.push(part);
        });
```

Erstellen und Initialisieren des mehrteiligen Uploadvorgangs

Nachdem das contentParts-Array mit allen BackgroundTransferContentPart-Objekten aufgefüllt ist, die jeweils eine IStorageFile zum Hochladen darstellen, kann CreateUploadAsync mit dem Uri zur Angabe, wohin die Anforderung gesendet wird, aufgerufen werden.

        // Create a new upload operation.
        uploader.createUploadAsync(uri, contentParts).then(function (uploadOperation) {

           // Start the upload and persist the promise to be able to cancel the upload.
           upload = uploadOperation;
           promise = uploadOperation.startAsync().then(complete, error, progress);
        });

     } catch (err) {
         displayError(err);
     }
 };

Aufzählen beibehaltener Vorgänge beim Start

Bei Abschluss oder Abbruch eines UploadOperation werden alle zugeordneten Systemressourcen freigegeben. Wenn die App allerdings vor Auftreten eines dieser Ereignisse beendet wird, werden aktive Vorgänge angehalten, und die ihnen zugeordneten Ressourcen bleiben belegt. Wenn diese Vorgänge nicht in der nächsten App-Sitzung aufgezählt und fortgesetzt werden, werden sie nicht abgeschlossen und belegen weiterhin Geräteressourcen.

Bevor Sie die Funktion zum Aufzählen beibehaltener Vorgänge definieren, müssen wir ein Array erstellen, das die zurückzugebenden UploadOperation-Objekte enthält:
```
var uploadOperations = [];
```
Im nächsten Schritt definieren Sie die Funktion, die alle beibehaltenen Vorgänge aufzählt und im Array speichert. Die load-Methode, die zum Neuzuweisen der Rückrufe von UploadOperation aufgerufen wird, wenn der Download nach Beendigung der App fortgesetzt wird, befindet sich in der UploadOp-Klasse, die Sie weiter unten in diesem Abschnitt definieren.
```
function Windows.Networking.BackgroundTransfer.BackgroundUploader.getCurrentUploadsAsync() {
    .then(function (uploads) {
        for (var i = 0; i < uploads.size; i++) {
            var upload = new UploadOp();
            upload.load(uploads[i]);
            uploadOperations.push(upload);
        }
    }
};
```
Hinweis

Für Windows Phone Store-Apps werden Hintergrundübertragungen fortgesetzt, während Ihre App nicht im Vordergrund ausgeführt wird. Da Ihre App in einem solchen Szenario nicht ausgeführt wird, erhält sie keine Benachrichtigung, wenn die Übertragung abgeschlossen ist. Wenn Ihre App fortgesetzt wird und Sie nur den Status einer abgeschlossenen Übertragung überprüfen, wird BackgroundTransferStatus.Running als Status zurückgegeben. Fügen Sie aber wie im obigen Beispiel einen Handler an die Übertragung an, wird der Aufgabenabschlusshandler ausgelöst, und der Übertragungsstatus wird aktualisiert.

Zeitüberschreitungen bei Anforderungen

Es müssen zwei primäre Szenarien zu Verbindungszeitüberschreitungen berücksichtigt werden:

Beim Herstellen einer neuen Verbindung für die Übertragung wird die Verbindungsanforderung abgebrochen, wenn die Verbindung nicht innerhalb von fünf Minuten hergestellt wird.
Nach dem Herstellen einer Verbindung wird eine HTTP-Anforderungsnachricht abgebrochen, auf die nicht innerhalb von zwei Minuten reagiert wurde.

Hinweis In der Annahme, dass Internetkonnektivität besteht, wiederholt die Hintergrundübertragung in beiden Szenarien eine Anforderung automatisch bis zu drei Mal. Wenn keine Internetkonnektivität erkannt wird, warten zusätzliche Anforderungen, bis Konnektivität vorhanden ist.

Debugging-Leitfaden

Das Beenden einer Debugsitzung in Microsoft Visual Studio ist mit dem Schließen der App vergleichbar; PUT-Uploads werden angehalten und POST-Uploads werden beendet. Auch beim Debuggen sollte die App alle beibehaltenen Uploads auflisten und dann neu starten oder abbrechen. Sie können beispielsweise aufgelistete beibehaltene Uploadvorgänge beim App-Start durch die App abbrechen lassen, wenn kein Interesse an vorherigen Operationen für diese Debugsitzung besteht.

Während Downloads/Uploads beim App-Start in einer Debugsitzung aufgelistet werden, können Sie diese durch Ihre App abbrechen lassen, wenn kein Interesse an vorherigen Operationen für diese Debugsitzung besteht. Beachten Sie, dass GetCurrentUploadsAsync Vorgänge nicht auflisten kann, die mithilfe der vorherigen App-Bereitstellung erstellt werden, wenn Visual Studio-Projektupdates, wie Änderungen am App-Manifest, vorhanden sind und die App deinstalliert und erneut bereitgestellt wird.

Weitere Informationen finden Sie unter Debuggen und Testen von Windows Store-Apps.

Bei der Verwendung von Hintergrundübertragungen während der Entwicklung kann es vorkommen, dass die internen Caches aktiver und abgeschlossener Übertragungsvorgänge nicht mehr synchron sind. Dies kann zur Folge haben, dass keine neuen Übertragungsvorgänge gestartet werden können, oder dass keine Interaktion mit vorhandenen Vorgängen und BackgroundTransferGroup-Objekten mehr möglich ist. In einigen Fällen wird durch den Versuch einer Interaktion mit vorhandenen Vorgängen ein Absturz ausgelöst. Dies kann vorkommen, wenn die TransferBehavior-Eigenschaft auf Parallel festgelegt ist. Dieses Problem tritt nur bei bestimmten Szenarien während der Entwicklung auf und betrifft nicht die Endbenutzer Ihrer App.

Vier Szenarien mit Visual Studio können dieses Problem auslösen.

Sie erstellen ein neues Projekt mit demselben App-Namen wie ein vorhandenes Projekt, jedoch einer anderen Sprache (z. B. C# statt C++).
Sie ändern die Zielarchitektur (z. B. von x86 zu x64) in einem vorhandenen Projekt.
Sie ändern die Kultur (z. B. von neutral zu en-US) in einem vorhandenen Projekt.
Sie fügen in einem vorhandenen Projekt eine Funktion im Paketmanifest (z. B. Unternehmensauthentifizierung) hinzu oder entfernen eine.

Normale App-Wartungen wie z. B. Manifestaktualisierungen, bei denen Funktionen hinzugefügt oder entfernt werden, lösen dieses Problem in den Bereitstellungen Ihrer App für Endbenutzer nicht aus.

Umgehen Sie dieses Problem, indem Sie alle Versionen der App vollständig deinstallieren und sie mit der neuen Sprache, Architektur, Kultur oder Funktion erneut bereitstellen. Dies ist auf der Startseite oder mithilfe von PowerShell und dem Remove-AppxPackage-Cmdlet möglich.

Zusammenfassung und nächste Schritte

Sie haben in diesem Thema erfahren, wie Dateien mit den Background Transfer-APIs in JavaScript hochgeladen werden.

Sie können auch Dateien in die Windows Store-App herunterladen. Eine Erläuterung der wichtigsten Konzepte und Beispiele finden Sie unter So wird's gemacht: Herunterladen einer Datei.