Come caricare dati binari con WinJS.xhr (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Puoi caricare e scaricare dati binari tramite WinJS.xhr (che esegue il wrapping di XMLHttpRequest). Questo esempio mostra come caricare una bitmap dalle tue immagini. Il metodo di Windows Runtime usato per aprire il file bitmap restituisce un IRandomAccessStream, pertanto devi usare MSApp.createBlobFromRandomAccessStream per convertirlo in un Blob.

Avviso Puoi ora usare XMLHttpRequest per caricare o scaricare oggetti di diversi MB, come gli oggetti Blob e FormData, il cui completamento può richiedere molto tempo. Poiché le app possono essere terminate in qualsiasi momento, per eseguire queste operazioni ti consigliamo di usare le API di trasferimento in background di Windows Runtime. Per altre informazioni sul caricamento e il download di contenuto, vedi Guida introduttiva: Caricamento di un file e Guida Come scaricare un file. Per una discussione generale del trasferimento in background, vedi Transferring data in the background.

Prerequisiti

In questa guida introduttiva si suppone che tu sia in grado di creare un'app di base che usi la Libreria Windows per JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Runtime in JavaScript.

Istruzioni

Passaggio 1: Configura l'app per l'accesso alle immagini e al Web

Nelle app, alcune funzionalità, come l'accesso a una determinata raccolta sul disco rigido o l'accesso alla rete, devono essere aggiunte in modo esplicito. Per altre informazioni sulle funzionalità, vedi Dichiarazioni di funzionalità delle app e Come configurare le funzionalità di rete.

In Visual Studio crea un'app JavaScript vuota.
Apri il file package.appxmanifest e vai alla scheda Funzionalità.
Per la versione di Windows dell'esempio, la funzionalità Internet (client) dovrebbe essere già selezionata, se non lo è selezionala. Se l'app deve essere in grado di connettersi come client a servizi Web su una rete domestica o aziendale, è necessaria anche la funzionalità Reti private (client e server).

Per la versione di Windows Phone dell'esempio, seleziona la funzionalità Internet (client e server).

Nota In Windows Phone è presente solo una funzionalità di rete (Internet (Client e server) che abilita l'intero accesso di rete per l'app.
Seleziona la funzionalità Raccolta immagini.

Passaggio 2: Caricare la bitmap

Esistono diversi metodi asincroni per la gestione dell'accesso ai file. Questi metodi asincroni vengono trattati come qualsiasi altra promessa in JavaScript.

Nota Per altre informazioni, vedi Programmazione asincrona in JavaScript.

Nella sezione BODY del file default.html aggiungi un elemento DIV che segnala se il caricamento è riuscito o meno e assegnagli l'ID "picDiv":
```
<div id="picDiv"></div>
```

Nel codice imposta riferimenti al DIV e alle immagini:

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

Individua il file desiderato nelle immagini. Potresti semplicemente caricare il file usando WinJS.xhr, ma supponiamo che tu voglia ricodificarlo e rielaborarlo in altro modo. Nella funzione completeFile della clausola then del metodo getFileAsync apri il file usando openAsync. Quindi, nella funzione completeStream della clausola then del metodo openAsync esegui l'elaborazione necessaria sul flusso del file aperto, che è di tipo IRandomAccessStream.
```
picturesLibrary.getFileAsync("myBitmap.bmp").then(
    function completeFile(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(
            function completeStream(stream) {
                // Do processing. 
    });
```

Passiamo ora al caricamento. WinJS.xhr e XMLHttpRequest non accettano caricamenti di tipo IRandomAccessStream, pertanto devi convertire il flusso in un Blob. La funzione di supporto MSApp.createBlobFromRandomAccessStream fa proprio questo. Puoi aggiungere il Blob risultante all'opzione data di WinJS.xhr. Puoi gestire l'esito positivo o negativo del caricamento nella clausola then di WinJS.xhr .

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";
    });