首頁 > 開發者 > JavaScript
標籤：event 控制項 ntb ted ica proc 匿名 sof
在應用程式中有時可能需要擷取使用者庫中的內容，以便執行相關的操作。如果要擷取某個使用者庫中的內容，需要先擷取到這個使用者庫，獲得使用者庫可以通過Windows.Storage命名空間中的KnownFolders類的相應屬性來實現，可用屬性包括documentsLibrary（文件庫）、musicLibrary（音樂庫）和videosLibrary（視頻庫）等。擷取到使用者庫之後，就可以使用KnownFolders類中的getItemsAsync、getFilesAsync或getFoldersAsync函數來擷取庫中的內容。其中，getItemsAsync函數可以擷取庫中的檔案和檔案夾，getFilesAsync函數只會擷取庫中的檔案，而getFoldersAsync函數只會擷取庫中的檔案夾，在實際開發中可以根據需要選用適合的函數來實現相應的功能。下面以擷取圖片庫中的檔案和檔案夾為例來示範如何擷取使用者庫中的內容。
建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為GetFilesAndFoldersApplication。開啟default.html檔案，在body元素中添加一個h2元素、一個文本區和一個按鈕，其中h2元素用來顯示頁面標題"擷取檔案和資料夾清單樣本"，按鈕用於擷取圖片庫中的內容，文本區用來顯示擷取到的內容。相應的HTML程式碼片段如下所示：
<body>
<h2 class="articleTitle">擷取檔案和資料夾清單樣本</h2>
<textarea id="textareaID" rows="5" cols="5">圖片庫中的內容包括：</textarea>
<br />
<button id="ButtonID">擷取圖片庫中的內容</button>
</body>
在上面的代碼中，為了便於設計CSS樣式和檢索控制項，在添加控制項時為其設定了類名和ID。其中，設定h2元素的class屬性值為articleTitle，同時，設定文本區和"擷取圖片庫中的內容"按鈕的id屬性值分別為textareaID和ButtonID。
接著，在default.css檔案中添加如下代碼來控制default.html頁面的布局。
/*設定h2元素的文本字型大小和在應用程式介面中的顯示位置*/
.articleTitle {
font-size: x-large;
margin: 20px 15px 10px 87px;
}
/*設定textarea控制項在介面中的顯示位置*/
#textareaID {
margin: 20px 15px 10px 90px;
}
/*設定"擷取圖片庫中的內容"按鈕在介面中的顯示位置*/
#ButtonID {
margin: 20px 15px 10px 150px;
}
完成前台介面的布局後，應用程式介面效果19-17所示。
圖19-17 前台介面
布局好前台介面後，接下來介紹如何擷取圖片庫中的內容。開啟default.js檔案，在"args.setPromise(WinJS.UI.processAll());"語句後添加如下代碼，為"擷取圖片庫中的內容"按鈕註冊click事件處理函數。
document.getElementById("ButtonID").addEventListener("click", GetFilesAndFolders);
代碼中以"ButtonID"為參數調用document對象的getElementById函數來尋找id屬性值為ButtonID的元素對象，並使用addEventListener函數為該元素對象的click事件註冊事件處理函數GetFilesAndFolders。下面來看一下事件處理函數GetFilesAndFolders的實現代碼。
GetFilesAndFolders函數用來處理"擷取圖片庫中的內容"按鈕的單擊事件，實現從圖片庫中擷取到檔案和資料夾清單。該函數的代碼添加在default.js檔案中的"app.onactivated = function (args) {...};"語句後，相應的JavaScript程式碼片段如下所示：
function GetFilesAndFolders() {
//先擷取到圖片庫
var folderObject = Windows.Storage.KnownFolders.picturesLibrary;
//然後調用getItemsAsync函數擷取圖片庫中的內容，包括檔案和子檔案夾
folderObject.getItemsAsync().then(function (items) {
var textareaObject = document.getElementById("textareaID");
//將擷取到的檔案和檔案夾顯示在文本區中
items.forEach(function (item) {
if (item.isOfType(Windows.Storage.StorageItemTypes.folder)) {
//如果當前項是檔案夾，則在文本區中顯示該檔案夾的名稱
textareaObject.innerText += "\r\n" + "檔案夾： " + item.name;
}
else if (item.isOfType(Windows.Storage.StorageItemTypes.file)) {
//如果當前項是檔案，則在文本區中顯示該檔案的名稱
textareaObject.innerText += "\r\n" + "檔案： " + item.name;
}
});
});
}
上面的代碼首先通過Windows.Storage.KnownFolders類的picturesLibrary屬性擷取到代表圖片庫的檔案夾對象，並賦值給變數folderObject；接著通過folderObject變數調用檔案夾對象的getItemsAsync函數擷取圖片庫中的內容，getItemsAsync函數調用完成之後定義一個匿名函數，用於將擷取到的檔案和檔案夾名稱顯示在文本區中。在這個匿名函數中，以"textareaID"為參數調用document對象的getElementById函數來尋找id屬性值為textareaID的元素對象，並賦值給變數textareaObject；然後調用參數items的forEach函數依次遍曆items集合中的每個資料項目item，並通過item對象的isOfType函數判斷該對象的類型，如果item對象是一個檔案夾，則將字串"檔案夾： "和該檔案夾的名稱顯示到文本區中，如果item對象是一個檔案，則將字串"檔案： "和該檔案的名稱顯示到文本區中。
啟動調試，單擊"擷取圖片庫中的內容"按鈕，就會擷取到圖片庫中的內容，包括檔案和檔案夾，同時這些檔案和檔案夾的名稱顯示在文本區中，效果19-18所示。
圖19-18 成功擷取圖片庫中的內容的效果
Win10系列：JavaScript擷取檔案和資料夾清單
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
