Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo cargar datos binarios con WinJS.xhr (aplicaciones de la Tienda Windows con JavaScript y HTML)

[Esta documentación es preliminar y está sujeta a cambios.]

Puedes cargar y descargar datos binarios cuando usas WinJS.xhr (que encapsula XMLHttpRequest). En este ejemplo se muestra cómo cargar un mapa de bits de la Biblioteca de imágenes. El método de Windows en tiempo de ejecución que se usa para abrir el archivo de mapa de bits devuelve una IRandomAccessStream, por lo que debes usar MSApp.createBlobFromRandomAccessStream para convertirlo en un Blob.

Advertencia  Ahora puedes usar XMLHttpRequest para cargar o descargar objetos que son más grandes que unos pocos MB, como objetos Blob y FormData, que podrían tardar mucho tiempo en completarse. Debido a que las aplicaciones de la Tienda Windows con JavaScript pueden cerrarse en cualquier momento, debes considerar la posibilidad de usar API de transferencia en segundo plano de Windows en tiempo de ejecución para estas operaciones. Para obtener más información sobre la carga y descarga de contenido, consulta Inicio rápido: cargar un archivo y Inicio rápido: descargar un archivo. Para ver una explicación general de la transferencia en segundo plano, consulta Transferring data in the background.

Requisitos previos

Se da por sentado que sabes crear una aplicación de la Tienda Windows básica con JavaScript que use la biblioteca de Windows para JavaScript. Para obtener ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.

Instrucciones

Paso 1: Configurar tu aplicación para acceder a la Biblioteca de imágenes y a Internet

En las aplicaciones de la Tienda Windows con JavaScript debes agregar ciertas funciones explícitamente, como el acceso a una biblioteca determinada de tu disco duro o a la red. (Para obtener más información sobre las funciones, consulta Declaraciones de funcionalidad de las aplicaciones).

  1. En Visual Studio, crea una aplicación JavaScript en blanco.

  2. Abre el archivo package.appxmanifest y ve a la pestaña Funcionalidades.

  3. La función Internet (cliente) ya debe estar seleccionada, pero si no lo está, selecciónala ahora.

  4. Selecciona la funcionalidad Biblioteca de imágenes.

Paso 2: Carga el mapa de bits

Windows en tiempo de ejecución tiene un número de métodos asincrónicos que controlan el acceso a archivos. Estos métodos asincrónicos se tratan como cualquier otra promesa en JavaScript.

Nota  Para obtener más información, consulta Programación asincrónica en JavaScript.

  1. En la sección BODY del archivo default.html, agrega un elemento DIV que notifica si la carga fue correcta o errónea, y asígnale el identificador "picDiv":

    
    <div id="picDiv"></div>
    
    
  2. En el código, configura las referencias a DIV y la Biblioteca de imágenes:

    
    var picDiv = document.getElementById("picDiv");
    var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary;
    
    
    
  3. Busca el archivo que deseas en la Biblioteca de imágenes. Podrías simplemente cargar este archivo mediante WinJS.xhr, pero digamos que deseas volver a codificar el archivo o procesarlo de alguna otra manera. En la función completeFile, en la cláusula then del método getFileAsync, abre el archivo mediante openAsync. Luego, en la función completeStream, en la cláusula then del método openAsync, realiza el procesamiento que desees en la secuencia del archivo abierto, que es de tipo IRandomAccessStream.

    
    picturesLibrary.getFileAsync("myBitmap.bmp").then(
        function completeFile(file) {
            return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
            }).then(
                function completeStream(stream) {
                    // Do processing. 
        });
    
    
    
  4. Pasemos a la carga. WinJS.xhr (así como XMLHttpRequest) no acepta cargas de tipo IRandomAccessStream, por lo que necesitas convertir la secuencia en un Blob. La función auxiliar MSApp.createBlobFromRandomAccessStream realiza exactamente esta tarea. Puedes agregar el Blob resultante a la opción data de WinJS.xhr. Puedes controlar que la carga sea correcta o errónea en la cláusula then de 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";
        });
    
    
  5. Ejecuta la aplicación. Deberías poder cargar el archivo.

 

 

Mostrar:
© 2018 Microsoft