Dieser Artikel wurde noch nicht bewertet - Dieses Thema bewerten.

Schnellstart: Senden von Dateien an ein Speichergerät (Windows Store-Apps mit JavaScript und HTML)

In diesem Lernprogramm wird dargestellt, wie Sie eine Datei auf ein Wechselspeichergerät kopieren, indem Sie mit Windows.Devices.Portable.Storage.FromId ein Speicherobjekt instanziieren.

Ziel: Erfahren Sie, wie Sie die Windows.Devices.Enumeration-API zum Aufzählen von Wechselspeichergeräten verwenden und ein Gerät auswählen, um es zum Instanziieren eines Speicherobjekts zu verwenden, das anschließend als Ziel für einen copyAsync-Vorgang dienen kann.

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 2012

Öffnen Sie eine Instanz von Visual Studio 2012.

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. Einfügen des JavaScript- und HTML-Codes in die App

Öffnen Sie die Datei "Default.html", und kopieren Sie den folgenden HTML-Code in die Datei, sodass der Originalinhalt ersetzt wird.

JavaScript



  
<!DOCTYPE html>
<html>
<head>
<title>Removable Storage Devices</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 pickStorage(){
        Enum.DeviceInformation.findAllAsync(
            Windows.Devices.Portable.StorageDevice.getDeviceSelector(),
            null).then(
                successCallback, 
                errorCallback);
    }

    // Handler that's called when removable storages are found.
    // The storageDevices parameter is of type
    // Windows.Devices.Enumeration.DeviceInformationCollection
    function successCallback(storageDevices){
        var removableStorage;
        if (storageDevices.length) {
            try {
                // Create an IStorageItem from the first removable storage device
                removableStorage = Windows.Devices.Portable.StorageDevice.fromId(
                    storageDevices.getAt(0).id);  
            } catch (e) {
                document.getElementById("output").innerHTML =
                    "Error creating storage item: " + e.message;
            }
            if (removableStorage != null) {
                PickAndSend(removableStorage, removableStorage.name);
            }
        }
    }                                

    function errorCallback(e) {
        document.getElementById("output").innerHTML = "Error: " + e.message;
    }

    // Pick a file, and send it to the removable storage device
    // removableStorage: The IStorageItem representing the storage device
    // removableStorageName: The name of the storage device
    function PickAndSend(removableStorage, removableStorageName) {
        // Create the picker for selecting an image file
        var picker = new Windows.Storage.Pickers.FileOpenPicker();
        // Set the collection of types that the file open picker displays.
        picker.fileTypeFilter.replaceAll([".jpg", ".png", ".gif"]);
        // Set the initial location where the file picker looks
        picker.suggestedStartLocation =
            Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
        picker.pickSingleFileAsync().then(
        function (sourceFile) {
            // sourceFile is null if the user
        // clicked cancel from the picker
            if (sourceFile == null) {
                document.getElementById("output").innerHTML =
                "No file was picked.";
            }
            else {
                // Copy the file to the storage device
                // using StorageFile.copyAsync
                sourceFile.copyAsync(removableStorage).then(
                    function (newFile) {
                        document.getElementById("output").innerHTML =
                        "Created file: " + newFile.name + " on " +
                        removableStorageName + "<br/>";
                },
                    function (e) {
                    // A failure here could mean that the removable storage
                    // does not allow file creation on its root.
                    // We try to find a folder to copy the file to.
                    copyToFirstAvailableFolder(
                            removableStorage, sourceFile);
                });   // end sourceFile.copyAsync
            }             // end if (sourceFile)
        });               // end pickSingleFileAsync.then
    }

function copyToFirstAvailableFolder(removableStorage, sourceFile) {
    // Construct a recursive folder search
    var queryOptions = new Windows.Storage.Search.QueryOptions(
            Windows.Storage.Search.CommonFolderQuery.defaultQuery);
    queryOptions.folderDepth = Windows.Storage.Search.FolderDepth.deep;
    var deepFolderQuery =
            removableStorage.createFolderQueryWithOptions(queryOptions);

    deepFolderQuery.getFoldersAsync().then(
        function (folders) {
            copyToFolder(folders, 0, sourceFile);
        },
        function (e) {
            document.getElementById("output").innerHTML =
                "Failed to find any folders to copy to: " + e.message;
        });
    }

function copyToFolder(folderList, currentIndex, sourceFile) {
    if (currentIndex === folderList.length) {
        document.getElementById("output").innerHTML =
            "Failed to find a writable folder to copy to";
        return;
    }

    var destinationFolder = folderList[currentIndex];
    document.getElementById("output").innerHTML =
            "Trying folder: " + destinationFolder.name + "...";
    performCopyToDevice(
            destinationFolder,
            sourceFile,
            function (newFile) {
        document.getElementById("output").innerHTML += "Created file: " +
        newFile.name + " in folder: " + destinationFolder.name + "<br/>";
    },
        function (e) {
        copyToFolder(folderList, currentIndex + 1, sourceFile);
    });
}

    function performCopyToDevice(
        destinationFolder, sourceFile, completedHandler, errorHandler) {
        if (itemInFileSystemStorage(destinationFolder)) {
            sourceFile.copyAsync(destinationFolder).then(
                completedHandler, errorHandler);
        } else {
            // Use createFile/stream copy for non-file-system-based storages
            var destOutputStream = null;
            var newFile = null;
            return destinationFolder.createFileAsync(sourceFile.fileName).
                then(
                    function (file) {
                newFile = file;
                return newFile.openAsync(
                    Windows.Storage.FileAccessMode.readWrite);
            },
                    errorHandler).
                then(
                    function (destStream) {
                destOutputStream = destStream.getOutputStreamAt(0);
                return sourceFile.openForReadAsync();
            },
                    errorHandler).
                then(
                    function (sourceInputStream) {
                Windows.Storage.Streams.RandomAccessStream.copy(
                    sourceInputStream, destOutputStream);
                return destOutputStream.flushAsync();
            },
                    errorHandler).
                then(
                    function () {
                completedHandler(newFile);
            },
                    errorHandler);
        }
    }

    function itemInFileSystemStorage(item) {
        // Items in file-system-backed storages have a non-zero-length path
        return (item.path.length > 0);
    }
</script>
</head>
<body>
<p>
Click "Send  File" <br /> </p>

<input type="button" onclick="pickStorage()" 
       value="Pick and Send File to Storage" /><br />
<div id=output></div>

</body>
</html>

5. Testen der Anwendung

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 Pick and Send File to Storage, um eine Datei mithilfe von FilePicker auszuwählen und die Datei auf das Wechselspeichergerät zu kopieren.

Hinweis Prüfen Sie Folgendes, wenn Sie einen Fehler erhalten:

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

Sie haben erfahren, wie Sie lokale Dateien auf ein Wechselspeichergerät kopieren. Im nächsten Lernprogramm erfahren Sie, wie Sie eine Bilddatei von einem Wechselspeichergerät abrufen und diese anzeigen.