Schnellstart: Abrufen von Bilddateien von einem Speichergerät (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

In diesem Lernprogramm wird dargestellt, wie Sie eine Bilddatei von einem Wechselspeichergerät abrufen und anzeigen.

Ziel: Wie im vorherigen Beispiel werden tragbare Speichergeräte aufgelistet und eines davon mit Windows.Devices.Portable.Storage.FromId instanziiert. In diesem Beispiel verwenden Sie jedoch createFileQueryWithOption für das Suchen nach einer Bilddatei und getFilesAsync, um die Datei abzurufen.

Voraussetzungen

Sie sollten mit JavaScript und HTML vertraut sein.

Sie benötigen ein verfügbares Wechselspeichergerät.

Zeitaufwand: 20 Minuten.

Anweisungen

1. Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

2. Erstellen eines neuen Projekts

Wählen Sie im Dialogfeld Neues Projekt in den JavaScript-Projekttypen die Option für eine leere App aus.

3. Deklarieren der Funktion "Wechselspeichergeräte"

Doppelklicken Sie im Projektmappen-Explorer auf die Datei package.appxmanifest. Klicken Sie auf die Registerkarte Capabilities. Aktivieren Sie in der Liste Funktionen die Option Wechselspeichergeräte.

4. Deklarieren der Dateitypen

Wählen Sie auf der Registerkarte "Deklarationen" unter Verfügbare Deklarationen die Option Dateitypzuordnungen aus.
Legen Sie unter Eigenschaften die Name-Eigenschaft auf image fest.
Klicken Sie im Feld "Unterstützte Dateitypen" auf Neue hinzufügen, und fügen Sie den Dateityp ".gif" als unterstützten Dateityp hinzu, indem Sie .gif in das FileType-Feld eingeben.
Fügen Sie zwei oder mehr unterstützte Dateitypen für JPG und PNG hinzu, indem Sie auf Neue hinzufügen klicken und den Dateityp angeben.

5. Einfügen des HTML- und JavaScript-Codes in der App

Öffnen Sie "Default.html", und ersetzen Sie den ursprünglichen Dateiinhalt durch folgenden Code.

<!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. Testen der App

Schließen Sie das Wechselspeichergerät an, wenn es noch nicht angeschlossen ist.
Klicken Sie im Menü Debuggen auf Debugging starten, um die Projektmappe zu testen.
Klicken Sie auf die Schaltfläche Get Image File, um die erste Bilddatei auf dem Wechselspeichergerät abzurufen und diese im Image-Element anzuzeigen.

Hinweis Überprüfen Sie bei einem Fehler Folgendes:

Vergewissern Sie sich, dass Sie Zugriff auf Wechselmedien haben, indem Sie im Projektmappen-Explorer die Datei package.appxmanifest öffnen und die Option Wechselmedien auf der Registerkarte Funktionen überprüfen.

Zusammenfassung und nächste Schritte

In diesem Beispiel haben Sie auf ein Bild auf einem Speichergerät zugegriffen, nachdem Sie das Speicherobjekt durch das Abrufen einer Geräte-ID von findAllAsync sowie deren Übergabe an Windows.Devices.Portable.Storage.FromId erstellt haben.

In der successHandler-Funktion wurde in diesem Beispiel das erste aller aufgezählten Speichergeräte ausgewählt. Sie können jedoch die App ändern, sodass eine Liste aller verfügbaren Wechselspeicher angezeigt wird, aus der der Benutzer auswählen kann.

Im nächsten Lernprogramm erstellen Sie das Speicherobjekt mithilfe eines Handlers zur automatischen Wiedergabe.

Freigeben über