快速入門：列出卸除式存放裝置 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個教學課程說明如何使用 Windows.Storage.KnownFolders 取得目前已連接裝置的快照做為 StorageFolder 物件。

目標: 您將了解如何使用 Windows.Storage.KnownFolders 列出卸除式存放裝置。

先決條件

您應該熟悉 JavaScript 和 HTML。

您需要一個卸除式存放裝置。

完成所需的時間: 20 分鐘.

指示

1. 開啟 Microsoft Visual Studio

開啟 Visual Studio 的執行個體。

2. 建立新專案

在 [新增專案] 對話方塊中，從 JavaScript 專案類型中選擇 [空白的應用程式]。

3. 宣告卸除式存放裝置功能

按兩下方案總管中的 package.appxmanifest。選取 [功能] 索引標籤。選取 [功能]**** 清單中的 [卸除式存放裝置]。

4. 插入應用程式 HTML 和 JavaScript

開啟 Default.html，然後將以下的程式碼複製到這個檔案中，取代原來的內容。


<!DOCTYPE html>
<html>
<head>
<title>Removable Storage Devices</title>
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type = "text/javascript" >

// Use the Removable Devices KnownFolder to get a snapshot of the currently 
// connected devices as StorageFolders. 
 function listStorages() {
        document.getElementById("output").innerHTML = "";
        Windows.Storage.KnownFolders.removableDevices.getFoldersAsync().
        then(
            function (removableStorages) {
            // Display each storage device.
            var numRemovableStorages = removableStorages.length;
            if (numRemovableStorages > 0) {
                removableStorages.forEach(function (removableStorage, i) {
                    document.getElementById("output").innerHTML +=
                             removableStorage.name + "<br/>";
                });
            } else {
                document.getElementById("output").innerHTML = 
                        "No storages found. Attach a removable storage " +
                        "such as a camera or USB drive.)";
            }
        },
            function (e) {
            document.getElementById("output").innerHTML = 
                    "Failed to find all storage devices. Error: " +
                     e.message;
        });
    }
</script>
</head>
<body>
<p>
Click "List Storages" to get a list removable storage devices.<br /></p>
<input type="button" onclick="listStorages()" value="List Storages" /><br />

<div id=output></div>

</body>
</html>

5. 測試應用程式

如果卸除式存放裝置尚未接到電腦，現在請接上。
在 [偵錯]**** 功能表中按一下 [開始偵錯] 來測試方案。
按一下 [列出儲存區]**** 按鈕，以查看卸除式存放裝置的清單。

注意如果您收到錯誤，請檢查下列項目：

藉由在 [方案總管] 中開啟 package.appxmanifest 並檢查 [功能] 索引標籤中的 [卸除式存放裝置]****，來確定已啟用存取卸除式存放裝置。

摘要

接著，您將從 [圖片] 複製檔案到存放裝置。