Démarrage rapide : obtenir un fichier image à partir d’un dispositif de stockage (applications du Windows Store en JavaScript et HTML)

Applies to Windows only

Ce didacticiel vous explique comment obtenir un fichier image d’un dispositif de stockage amovible et comment l’afficher.

Objectif: comme dans l’exemple précédent, nous allons énumérer les dispositifs de stockage portables et en créer une instance à l’aide de la méthode Windows.Devices.Portable.Storage.FromId. Pour les besoins de cet exemple cependant, nous allons utiliser la méthode createFileQueryWithOption pour rechercher un fichier image et la méthode getFilesAsync pour le récupérer.

Prérequis

Vous devez connaître JavaScript et HTML.

Vous devez disposer d’un dispositif de stockage amovible.

Durée de réalisation: 20 minutes.

Instructions

1. Ouvrir Microsoft Visual Studio

Ouvrez une instance de Visual Studio.

2. Créer un projet

Dans la boîte de dialogue Nouveau projet, choisissez une application vide dans les types de projets JavaScript.

3. Déclarer la fonctionnalité de stockage amovible

Double-cliquez sur package.appxmanifest dans l’Explorateur de solutions. Sélectionnez l’onglet Capacités. Activez Stockage amovible dans la liste Capacités.

4. Déclarer les types de fichiers

  1. Sous l’onglet Déclarations, choisissez Déclarations de types de fichiers dans Déclarations disponibles.
  2. Sous Propriétés, affectez à la propriété Name la valeur image.
  3. Dans la section Types de fichiers pris en charge, cliquez sur Ajouter nouveau, puis tapez .gif dans le champ Type de fichier pour ajouter l’extension .gif à la liste des types de fichiers pris en charge.
  4. Ajoutez deux autres types de fichiers pris en charge pour .jpg et .png en cliquant sur Ajouter et en renseignant la valeur FileType.

5. Insérer le code HTML et JavaScript de l’application

Ouvrez votre fichier Default.html et copiez le code suivant dedans, en remplaçant son contenu d’origine.


<!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. Tester l’application

  1. Connectez votre support de stockage amovible, si tel n’est pas déjà le cas.
  2. Dans le menu Déboguer, cliquez sur Démarrer le débogage pour tester la solution.
  3. Cliquez sur le bouton Obtenir le fichier image pour récupérer le premier fichier image du dispositif de stockage amovible et l’afficher dans l’élément d’image.

Remarque  Si vous obtenez une erreur, vérifiez ce qui suit :

  • Assurez-vous d’avoir autorisé l’accès au support de stockage amovible en ouvrant package.appxmanifest dans l’Explorateur de solutions et en activant l’option Stockage amovible dans l’onglet Capacités.

Dans cet exemple, nous avons accédé à une image sur un dispositif de stockage, après avoir créé l’objet représentant le stockage par le biais de la méthode findAllAsync pour obtenir l’ID du périphérique et le passer à la méthode Windows.Devices.Portable.Storage.FromId

Dans la fonction successHandler, cet exemple a opté pour le premier des dispositifs de stockage énumérés, mais vous pouvez modifier l’application de façon à présenter une liste de tous les stockages amovibles disponibles parmi lesquels l’utilisateur peut indiquer son choix.

Dans le didacticiel suivant, nous allons créer l’objet du stockage en utilisant un gestionnaire de lecture automatique.

Rubriques associées

Démarrage rapide : énumération des périphériques courants
Accéder à la carte SD dans les applications Windows Phone

 

 

Afficher:
© 2014 Microsoft