在应用程序中有时可能需要获取用户库中的内容，以便执行相关的操作。如果要获取某个用户库中的内容，需要先获取到这个用户库，获得用户库可以通过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 成功获取图片库中的内容的效果

Windows Store App JavaScript 开发：获取文件和文件夹列表的更多相关文章

  1. Windows Store App JavaScript 开发：选取文件和文件夹

    前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...

  2. Windows Store App JavaScript 开发：文件选取器

    正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...

  3. Windows Store App JavaScript 开发：小球运动示例

    通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...

  4. Windows Store App JavaScript 开发：简单对象绑定

    简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...

  5. Windows Store App JavaScript 开发：页内导航

    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...

  6. Windows Store App JavaScript 开发：页面加载

      在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...

  7. Windows Store App JavaScript 开发：模板绑定

    WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...

  8. Windows Store App JavaScript 开发：WinJS库控件

    在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...

  9. Windows Store App Image开发示例

    通过上面的介绍,读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性,在实际的开发工作中,比较常用的是Image对象,下面以一个幼儿园识物识字卡应用为例,来帮助读者更好的理解Im ...

随机推荐

  1. css的权重

    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ ...

  2. 据说年薪30万的Android程序员必须知道的帖子

    Android中国开发精英 目前包括: Android开源项目第一篇--个性化控件(View)篇       包括ListView.ActionBar.Menu.ViewPager.Gallery.G ...

  3. SQL查询每个表的字段数量

    --SQL查询每个表的字段数量select b.[name], count(*) As AllCount,ISNULL(ISNULL(sum(case when isnullable=0 then 1 ...

  4. Java程序员们最常犯的10个错误

    将数组转化为一个列表时,程序员们经常这样做: List<String> list = Arrays.asList(arr); Arrays.asList()会返回一个ArrayList对象 ...

  5. acvity和fragment通过广播联系

    今天我遇到一个问题,就是在activity中需要动态改变fragment中的控件,以前看到过可以在activity中得到fragment实例,然后修改控件: 今天实验了一个新的办法,通过新的办法,就是 ...

  6. 前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器

    [自己测了下,能兼容各种浏览器,但是读取中文会出现乱码.自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?..)] 原文  http://blog.cs ...

  7. kali4.0 安装32位库

    一.前情提要: OS:Kali4.0 64bit 二.安装32位库: 错误方法:sudo apt-get install lib6-i386 正确方法如下: 1.先以root用户身份登陆: su ro ...

  8. 无法启动调试。未安装Silverlight Developer运行时。最新运行时可以从以下地址下载： http://go.microsoft.com/fwlink/?LinkId=146060.

    无法启动调试.未安装Silverlight Developer运行时.最新运行时可以从以下地址下载: http://go.microsoft.com/fwlink/?LinkId=146060. 解决 ...

  9. mac上的git环境配置

    git生成ssh key for mac 打开终端 cd ~/.ssh 看有没有文件 没有的时候 有有ssh key是这样的多了id_rsa(私钥)和 id_rsa.pub(公钥) 没有的话创建 ss ...

  10. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...