快速入门：从存储设备获取图像文件 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

本教程介绍如何从可移动存储设备获取图像文件并显示它们。

目标: 与前面的示例中一样，你将枚举便携式存储设备并使用 Windows.Devices.Portable.Storage.FromId 来实例化一个设备，但是在此示例中，你将使用 createFileQueryWithOption 来查找一个图像文件，并使用 getFilesAsync 来检索它。

先决条件

你应该熟悉 JavaScript 和 HTML。

你需要有一个可移动的存储设备。

完成所需时间: 20 分钟.

说明

1. 打开 Microsoft Visual Studio

打开 Visual Studio 的一个实例。

2. 创建一个新项目

在“新建项目”对话框中，从 JavaScript 项目类型中选择一个空白应用程序。

3. 声明可移动存储功能

在解决方案资源管理器中，双击“package.appxmanifest”。选择“功能”选项卡。在“功能”列表中选中“可移动存储”。

4. 声明文件类型

在“声明”选项卡中，从“可用声明”中选择“文件类型声明”****。
在“属性”****下，将“名称”属性设置为“image”。
在“支持的文件类型”框中，单击“新增”，通过在“文件类型”字段中输入 .gif 可以将 .gif 作为支持的文件类型加入。
通过单击“新增”并填写“文件类型”，再添加两种支持的文件类型 .jpg 和 .png。

5. 插入应用程序 HTML 和 JavaScript

打开 Default.html 并将下列代码复制到文件中，替换掉原来的内容。

<!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. 测试应用程序

如果你的可移动存储设备未连接，请将其插入。
在“调试”****菜单上，单击“启动调试”测试该解决方案。
单击“获取图像文件”****按钮，以获取可移动存储设备上的第一个图像文件，并在图像元素中显示它。

注意如果出错，请检查以下内容：

确保已启用对可移动存储的访问权限，方法是在解决方案资源管理器中打开 package.appxmanifest 并在“功能”****选项卡中选中“可移动存储”。

摘要和后续步骤

在此示例中，你通过从 findAllAsync 获取一个设备 ID 并将其传递到 Windows.Devices.Portable.Storage.FromId 来创建了一个存储对象，然后从存储设备访问一个图像。

在 successHandler 函数中，此示例选择了所有枚举存储设备的第一个，但是你可以修改应用，以显示所有可用的可移动存储列表供用户从中选择。

在下一个教程中，你将通过使用自动播放处理程序创建存储对象。

通过