Windows Store App JavaScript 开发:获取文件和文件夹列表

在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作。如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现,可用属性包括documentsLibrary(文档库)、musicLibrary(音乐库)和videosLibrary(视频库)等。获取到用户库之后,就可以使用KnownFolders类中的getItemsAsync、getFilesAsyncgetFoldersAsync函数来获取库中的内容。其中,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 成功获取图片库中的内容的效果

时间: 2024-10-12 18:18:50

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

Windows Store App JavaScript 开发:选取文件和文件夹

前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSingleFileAsync函数用于选取单个文件,pickMultipleFilesAsync函数用于选取多个文件:而FolderPicker类中只有一个pickSingleFolderAsync函数,用来选取单个文件夹.下面以一个应用程序为例来演示如何选取文件或文件夹. 新建一个JavaScript的W

Windows Store App JavaScript 开发:文件选取器

正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进行操作的选取器和对文件夹进行操作的选取器.对文件进行操作的选取器包含文件打开选取器和文件保存选取器,文件打开选取器由FileOpenPicker类表示,用来选取或打开文件:文件保存选取器由FileSavePicker类表示,用来向指定的文件系统位置中保存文件.对文件夹进行操作的选取器由FolderP

Windows Store App JavaScript 开发:小球运动示例

通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目,以及怎样向项目中添加功能实现代码. 首先启动Visual Studio 2012集成开发工具,打开"文件"菜单,选择其中的"新建项目"菜单项后会弹出"新建项目"窗口.在"新建项目"窗口左侧的JavaScript模板分类中选择&q

Windows Store App JavaScript 开发:简单对象绑定

简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用程序.在这个应用程序中将一个img控件与一个包含图片路径信息的对象相绑定,实现在img控件中显示图片. 在Visual Studio 2012中新建一个JavaScript的Windows应用商店的空白应用程序项目,将其命名为SimpleObjectBinding.接着添加项目中用到的图片文件,在项

Windows Store App JavaScript 开发:页内导航

页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用PageControlNavigator控件加载其他页面的内容.WinJS.Navigation.navigate函数以一个包含页面地址的对象为参数,在该函数执行时将触发WinJS.Navigation.onnavigated事件并把页面地址传递给该事件.PageControlNavigator控件

Windows Store App JavaScript 开发:页面加载

  在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlControl控件接收一个包含页面地址的对象作为参数,并根据这个地址加载相应的页面:PageControl控件是自定义控件,可以使用WinJS.UI.Pages.define函数将一个页面定义为PageControl控件,然后在其他页面中使用,使用这个PageControl控件就相当于加载了该控件相对应的页

Windows Store App JavaScript 开发:WinJS库控件

在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据.ListView控件的常用属性有: q  groupDataSource属性,用来设置分组的数据源. q  groupHeaderTemplate属性,用来为分组的头部设置模板. q  itemDataSource属性,用来为组中的数据项设置数据源. q  it

Windows Store App JavaScript 开发:模板绑定

WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控件的方法相似:在页面中添加一个div元素,将div元素的data-win-control属性设置为WinJS.Binding.Template.定义WinJS库模板以后,需要在WinJS库模板内部添加控件以显示绑定的数据,WinJS库模板内部只能有一个根元素,当绑定多条数据时,需要在WinJS库模板

C#学习(九)之Windows Store App &amp; WP 开发小记(一)

由于课程已经讲述完毕,所以本次学习记录就讨论记录一下我在Windows Store App & WP开发中遇到的一些问题与收获. 一.数据库(Sqlite)的使用 虽然资料很难找,但sqlite在这两个平台的使用还是很简单的. 首先是环境配置阶段: 1.工具->拓展与更新->联机,然后在右上搜索sqlite,之后下载安装下图两个打勾的拓展包,注意要重启VS方才生效. 2.项目->管理NuGet程序包->联机,搜索sqlite,安装下图打勾内容,如果项目多出下图两个文件即安装