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

Inicio rápido: cargar un archivo (aplicaciones de la Tienda Windows con JavaScript y HTML)

Este tema mostrará cómo cargar datos o un archivo de un dispositivo a Internet.

Las aplicaciones de la Tienda Windows pueden usar las API analizadas en este tema para permitir la interacción de las aplicaciones con servicios web a fin de consumir o compartir formatos multimedia populares, como fotos, música y vídeo.

Tu aplicación de la Tienda Windows puede usar Background Transfer para transferencias de secuencias, de varias partes o de gran tamaño (vídeo, música e imágenes grandes), con una duración operativa que puede extenderse más allá de múltiples suspensiones de la aplicación o cambios en la disponibilidad de la red.

Para echar un vistazo general a la transferencia en segundo plano, consulta el tema Transferencia de datos en segundo plano.

Requisitos previos

Si necesitas ayuda para crear una aplicación de la Tienda Windows de JavaScript, consulta el tema sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript. De forma adicional, en este tema se usan promesas de JavaScript para completar las operaciones asincrónicas. Si quieres obtener más información acerca de este modelo de programación, consulta el tema sobre programación asincrónica en JavaScript con promesas.

Para asegurarte de que la aplicación de la Tienda Windows está lista para la red, debes establecer la funcionalidad en el archivo Package.appxmanifest del proyecto. Para obtener una definición de cada funcionalidad de red, consulta el tema sobre cómo configurar las funcionalidades de aislamiento de red.

Los siguientes ejemplos de transferencia en segundo plano usan JavaScript y se basan en la muestra de transferencia en segundo plano.

Operaciones de carga de transferencia en segundo plano

Al usar la transferencia en segundo plano, la carga existe como una UploadOperation que expone varios métodos de control que se usan para reiniciar o cancelar la operación. El sistema controla automáticamente los eventos de la aplicación (por ejemplo, suspensión o finalización) y los cambios en la conectividad por UploadOperation; las cargas continuarán durante los periodos de suspensión o pausa de la aplicación y se mantendrán tras la finalización de la misma. Además, al establecer la propiedad CostPolicy, se indica si tu aplicación iniciará las cargas mientras se usa una red de uso medido para la conexión a Internet.

En los siguientes ejemplos, te explicaremos cómo crear e inicializar una carga básica y cómo enumerar y volver a introducir operaciones persistentes de una sesión anterior de la aplicación.

Cargar un archivo

La creación de una carga comienza con BackgroundUploader. Esta clase se usa para proporcionar los métodos que permiten a tu aplicación configurar la carga antes de crear la UploadOperation resultante. En el siguiente ejemplo se muestra cómo realizar esto con los objetos Uri y StorageFile necesarios.

  1. Identificar el archivo y el destino de la carga

    Antes de comenzar la creación de una UploadOperation, debemos identificar el URI de la ubicación en la que se va a realizar la carga y el archivo que se cargará. En el siguiente ejemplo, el valor uriString se rellena mediante una cadena de entrada de UI y el valor file mediante el objeto StorageFile devuelto por una operación PickSingleFileAsync.

    
    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);
        });
    }
    
    
    
  2. Crear e inicializar la operación de carga

    En el paso anterior, los valores uriString y file se pasan a una instancia de nuestro siguiente ejemplo, UploadOp, donde se usan para configurar e iniciar la nueva operación de carga. Primero, uriString se analiza para crear el objeto Uri necesario.

    Después, BackgroundUploader usa las propiedades del StorageFile proporcionado (file) para rellenar el encabezado de la solicitud y establecer la propiedad SourceFile con el objeto StorageFile. Después se llama al método SetRequestHeader para insertar el nombre de archivo, indicado como una cadena, y la propiedad StorageFile.Name.

    Finalmente, BackgroundUploader crea la 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);
            }
        };
    }
    
    
    

    Observa las llamadas de método asincrónico definidas con compromisos de JavaScript. En una línea del último ejemplo:

    
    promise = upload.startAsync().then(complete, error, progress);
    
    
    

    La llamada de método asincrónico está seguida por una instrucción then que indica métodos definidos por la aplicación a los que se llama cuando se devuelve un resultado de la llamada de método asincrónico. Si quieres obtener más información acerca de este patrón de programación, consulta el tema sobre programación asincrónica en JavaScript con compromisos.

Cargar varios archivos

  1. Identificar los archivos y el destino de la carga

    En un escenario que implica varios archivos transferidos con una sola UploadOperation, el proceso comienza como lo hace normalmente, proporcionando primero el URI de destino requerido y la información del archivo local. Al igual que en el ejemplo de la sección anterior, el usuario final proporciona el URI como una cadena y FileOpenPicker se puede usar para ofrecer la capacidad de indicar archivos en la interfaz de usuario. Sin embargo, en este escenario la aplicación debería llamar en cambio al método PickMultipleFilesAsync para permitir la selección de varios archivos en la interfaz de usuario.

    
    
    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);
       });
    }
    
    
  2. Crear objetos para los parámetros proporcionados

    Los siguientes dos ejemplos usan código contenido en un solo método de ejemplo, startMultipart, al que se llamó al final del último paso. A fines de instrucción, el código del método que crea una matriz de objetos BackgroundTransferContentPart se ha separado del código que crea la UploadOperation resultante.

    Primero, la cadena de URI proporcionada por el usuario se inicializa como Uri. Después se itera la matriz de objetos IStorageFile (files) pasada a este método y se usa cada objeto para crear un nuevo objeto BackgroundTransferContentPart, que después se coloca en la matriz contentParts.

    
    
    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);
            });
    
    
  3. Crear e inicializar la operación de carga de varias partes

    Con nuestra matriz contentParts compuesta por todos los objetos BackgroundTransferContentPart representando cada IStorageFile para cargar, estamos listos para llamar a CreateUploadAsync con Uri para indicar adónde se enviará la solicitud.

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

Enumerar operaciones persistentes en el inicio

Después de finalizada o cancelada una UploadOperation, se liberan todos los recursos del sistema asociados a ella. Sin embargo, si tu aplicación finaliza antes de que sucedan algunas de estas situaciones, se pausan todas las operaciones activas y se mantienen ocupados los recursos asociados a ellas. Si no se enumeran estas operaciones y se vuelven a introducir en la siguiente sesión de la aplicación, no se completarán y seguirán ocupando recursos del dispositivo.

  1. Antes de definir la función que enumera las operaciones persistentes, necesitamos crear una matriz que contenga los objetos UploadOperation que va a devolver:

    
    var uploadOperations = [];
    
    
    
  2. Después definimos la función que enumera las operaciones persistidas y las almacena en nuestra matriz. Ten en cuenta que el método load al que se llamó para reasignar las devoluciones de llamada a la UploadOperation, si es que persiste tras la finalización de la aplicación, se encuentra en la clase UploadOp que definiremos más adelante en esta sección.

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

Tiempos de espera de solicitudes

Son dos los escenarios principales relacionados con el tiempo de espera de la conexión que se deben tener en cuenta:

  • Al establecer una nueva conexión para una transferencia, la solicitud de conexión se cancelará si no se establece en cinco minutos.

  • Después de establecer una conexión, se cancelará el mensaje de solicitud HTTP que no haya recibido una respuesta transcurridos dos minutos.

Nota  En ambos escenarios, y asumiendo que hay conexión a Internet, la transferencia en segundo plano intentará una solicitud hasta tres veces de manera automática. Si no se detecta una conexión a Internet, las solicitudes adicionales esperarán hasta que se establezca la conexión.

Resumen y next steps

En este tema hemos revisado cómo cargar archivos mediante las API Background Transfer en JavaScript.

También puedes descargar archivos en tu aplicación de la Tienda Windows. Para obtener una explicación de los conceptos básicos y ver ejemplos, consulta el tema de inicio rápido: descargar un archivo.

Temas relacionados

Inicio rápido: descargar un archivo
Windows.Networking.BackgroundTransfer
Mantenimiento de la conectividad de red
Acceso a la información de conexión y plan de datos
Muestra de transferencia en segundo plano

 

 

Mostrar:
© 2018 Microsoft