在应用程序中有时可能需要获取用户库中的内容，以便执行相关的操作。如果要获取某个用户库中的内容，需要先获取到这个用户库，获得用户库可以通过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获取文件和文件夹列表的更多相关文章

  1. JavaScript获取及判断文件类型

    一.获取文件后缀 <input type="file" name="addvedio" accept="video/*"/>注: ...

  2. Python股票分析系列——自动获取标普500股票列表.p5

    该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第5部分.在本教程和接下来的几节中,我们将着手研究如何为更多公司提供大量的定价信息,以及如何一次 ...

  3. Win10系列：JavaScript访问文件和文件夹

    在实际开发中经常会遇到访问文件的情况,因此学习与文件有关的操作对程序开发很有帮助,关于文件操作的一些基本技术,在前面章节中有专门基于C#语言的详细讲解,本节主要介绍如何使用HTML5和JavaScri ...

  4. Windows Store App JavaScript 开发：获取文件和文件夹列表

    在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...

  5. Win10系列：JavaScript写入和读取文件

    正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文 ...

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

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

  7. Windows Store App 获取文件及文件夹列表

    通过使用13.2.1小节给出的方法和属性,不仅可以对用户库中的文件和文件夹进行操作,还可以获取其中所有的文件或者文件夹,比如为了完整地展现整个音乐库,可以获取并列举出音乐库中所有的音乐文件,以便能够在 ...

  8. 获取WINDOWS特殊文件夹

    const// registry entries for special paths are kept in :  REGSTR_PATH_SPECIAL_FOLDERS   = REGSTR_PAT ...

  9. Android:创建文件或文件夹以及获取sd卡根目录

    目录结构: 功能,可以根据录入的目录或者文件夹生成相应的文件或者文件夹 首先需要添加一个权限: <uses-permission android:name="android.permi ...

随机推荐

  1. js_为元素动态注册事件

    <head> <title></title> <script type="text/javascript">//window.onl ...

  2. [原][osg][osgEarth]EarthManipulator关于oe漫游器的handle部分解读以及修改（仿照谷歌，修改oe漫游器中focal（视角切换）功能 续 二）

    bool EarthManipulator::handle(const osgGA::GUIEventAdapter& ea, osgGA::GUIActionAdapter& aa) ...

  3. 网络通信框架：Netty和Mina

    参考: https://www.cnblogs.com/wrencai/p/5907042.html https://blog.csdn.net/qq_29954971/article/details ...

  4. Codeforces E - Connected Components?

    E - Connected Components? 思路: 补图bfs,将未访问的点存进set里 代码: #include<bits/stdc++.h> using namespace s ...

  5. MyBatis-session-SqlSession

    The SqlSession instance is the most powerful in MyBatis. It is where you'll find all of the methods ...

  6. Dynamic Binding

    调用方法时,如何决定调用对象还是其父类的方法呢? 在JVM中,根据实际类型(actual type)调用.而非声明类型(declared type),如果实际类型的类中没有该方法,就会沿着inheri ...

  7. 【转】 strrchr()函数---C语言

    转自:https://baike.baidu.com/item/strrchr/4621437?fr=aladdin   函数名称: strrchr 函数原型:char *strrchr(const ...

  8. G.711是一种由国际电信联盟（ITU-T）制定的音频编码方式

    http://zh.wikipedia.org/zh-cn/G.711 ITU-T G.711 page ITU-T G.191 software tools for speech and audio ...

  9. Lab 3-2

    Analyze the malware found in the file Lab03-02.dll using basic dynamic analysis tools. Questions and ...

  10. apply、call

    call(),apply() 1.每个函数都包含两个非继承而来的方法:call()和apply() 2.在特定的作用域内调用函数,等于设置函数体内的this对象,以扩充函数赖以运行的作用域 3.app ...