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

Inicio rápido: Obtener un archivo de imagen desde un dispositivo de almacenamiento (aplicaciones de la Tienda Windows con JavaScript y HTML)

Este tutorial te muestra cómo obtener un archivo de imagen desde un dispositivo de almacenamiento extraíble y cómo mostrarlo.

Objetivo: Al igual que en el ejemplo anterior, enumerarás dispositivos de almacenamiento portátiles y crearás una instancia de uno de ellos mediante Windows.Devices.Portable.Storage.FromId, pero en este ejemplo usarás createFileQueryWithOption para buscar un archivo de imagen y getFilesAsync para recuperarlo.

Requisitos previos

Debes tener conocimientos de JavaScript y HTML.

Debes tener disponible un dispositivo de almacenamiento extraíble.

Tiempo para finalizar: 20 minutos.

Instrucciones

1. Abrir Microsoft Visual Studio 2012

Abre una instancia de Visual Studio 2012.

2. Crear un nuevo proyecto

En el cuadro de diálogo Nuevo proyecto, elige una aplicación vacía en los tipos de proyecto JavaScript.

3. Declarar la funcionalidad de almacenamiento extraíble

Haz doble clic en package.appxmanifest en el Explorador de soluciones. Selecciona la pestaña Funcionalidad. Activa la opción Almacenamiento extraíble en la lista Funcionalidad.

4. Declarar los tipos de archivos

  1. En la pestaña Declaraciones, elige File Type Declarations (Declaraciones de tipos de archivo) en Declaraciones disponibles.
  2. En Propiedades, configura la propiedad Nombre como image.
  3. En la casilla Tipos de archivo admitidos, haz clic en Agregar nuevo para agregar la extensión .gif como tipo de archivo admitido. Para ello, escribe .gif en el campo FileType.
  4. Agrega otros dos tipos de archivo admitidos para las extensiones .jpg y .png haciendo clic en Agregar nuevo y completando el campo FileType.

5. Insertar el código JavaScript y HTML de la aplicación

Abre el archivo Default.html y copia el siguiente código en él, sustituyendo su contenido original.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Get an image file from a removable storage device</title>
    
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />

    <script type = "text/javascript" >

    Enum = Windows.Devices.Enumeration;

    // Enumerate removable storage devices.
    // The success callback selects the removable storage to use.
    function pickStorageToGetImageFrom() {
        Enum.DeviceInformation.findAllAsync(
        Windows.Devices.Portable.StorageDevice.getDeviceSelector(),
        null).then(
            successCallback,
            errorCallback);
    }

    // Handler that's called when removable storages are found.
    // storageDevices: A collection of type
    // Windows.Devices.Enumeration.DeviceInformationCollection.
    // This example just takes the first storage found in the list.
    function successCallback(storageDevices) {
        var removableStorage = null;
        if (storageDevices.length) {
            try {
                // Create an IStorageItem from the first removable storage device
                removableStorage = Windows.Devices.Portable.StorageDevice.fromId(
                storageDevices.getAt(0).id);
                // document.getElementById("output").innerHTML = storageDevices.getAt(0).name; 
            } catch (e) {
                document.getElementById("output").innerHTML =
                "Error: " + e.message;
            }
            if (removableStorage != null) {
                getImageFiles(removableStorage);
            }
        } else {
            document.getElementById("output").innerHTML =
                "No removable storage devices were found.";
        }
    }

    // Error callback that's called if unable to enumerate all 
    // removable storages
    function errorCallback(e) {
        document.getElementById("output").innerHTML =
            "Error enumerating storages: " + e.message;
    }

    // Find the images on the removable storage and display the first one
    // in the <img> element.
    // storageItem: the item representing the removable storage
    function getImageFiles(removableStorage)
    {
        // Construct the query for image files
        var queryOptions = new Windows.Storage.Search.QueryOptions(
                    Windows.Storage.Search.CommonFileQuery.orderByName,
                    [".jpg", ".png", ".gif"]);
        var imageFileQuery = removableStorage.createFileQueryWithOptions(
            queryOptions);

        // Run the query for image files
        imageFileQuery.getFilesAsync().
                    then(
                        function (items) {
            displayFirstImage(items);
        },
                        function (e) {
            document.getElementById("output").innerHTML =
                "Error when looking for images on the removable storage: "
                + e.message;
        });
    }



    function displayFirstImage(items) {
        var found = false;
        for (var i = 0, l = items.length; i < l && !found; i++) {
            if (items[i].size > 0) { // display the first non-empty file
                displayImage(items[i]);
                found = true;
            }
        }

        if (!found) {
            // No files found matching our criteria
            document.getElementById("output").innerHTML =
                "No image files found on the removable storage.";
        }
    }

    function displayImage(imageFile) {
        document.getElementById("imageNameHolder").innerHTML =
            "Image file name: " + imageFile.name + "<br/>";

        // Setting 2nd parameter to 'false' cleans up the URL 
        // after first use. we set this because we only need 
        // to load the URL into the image tag once.
        document.getElementById("imageHolder").src =
            window.URL.createObjectURL(imageFile, false);
    }
    </script>
</head>
<body>

<div>
     <p>Finds and displays the first available image file
        (.jpg, .png, or .gif) on a removable storage device.</p>
     <button onclick="pickStorageToGetImageFrom()">Get Image File</button>
</div>

<div id="output"></div>
<div id="imageOutput">
     <img id="imageHolder" alt="image holder" src=""/><br />
     <div id="imageNameHolder"></div>
</div>
</body>
</html>


6. Probar la aplicación

  1. Conecta el dispositivo de almacenamiento extraíble, si aún no está conectado.
  2. En el menú Depurar, haz clic en Iniciar depuración para probar la solución.
  3. Haz clic en el botón Get Image File (Obtener archivo de imagen) para obtener el primer archivo de imagen del dispositivo de almacenamiento extraíble y mostrarlo en el elemento de imagen.

Nota  Si obtienes un error, realiza las siguientes comprobaciones:

  • Asegúrate de que has habilitado el acceso al almacenamiento extraíble. Para ello, abre package.appxmanifest en el Explorador de soluciones y activa Almacenamiento extraíble en la pestaña Funcionalidades.

Resumen y next steps

En este ejemplo has accedido a una imagen desde un dispositivo de almacenamiento después de crear el objeto de almacenamiento obteniendo un identificador de dispositivo de findAllAsync y pasándolo a Windows.Devices.Portable.Storage.FromId

En la función successHandler, este ejemplo eligió el primero de los dispositivos de almacenamiento enumerados, pero puedes modificar la aplicación a fin de presentar una lista de los dispositivos de almacenamiento extraíbles que están disponibles para que elija el usuario.

En el siguiente tutorial crearás el objeto de almacenamiento usando un identificador de reproducción automática.

Temas relacionados

Inicio rápido: enumeración de dispositivos comunes

 

 

Mostrar:
© 2018 Microsoft