Win10系列:JavaScript获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作。如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过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获取文件和文件夹列表的更多相关文章
- JavaScript获取及判断文件类型
一.获取文件后缀 <input type="file" name="addvedio" accept="video/*"/>注: ...
- Python股票分析系列——自动获取标普500股票列表.p5
该系列视频已经搬运至bilibili: 点击查看 欢迎来到Python for Finance教程系列的第5部分.在本教程和接下来的几节中,我们将着手研究如何为更多公司提供大量的定价信息,以及如何一次 ...
- Win10系列:JavaScript访问文件和文件夹
在实际开发中经常会遇到访问文件的情况,因此学习与文件有关的操作对程序开发很有帮助,关于文件操作的一些基本技术,在前面章节中有专门基于C#语言的详细讲解,本节主要介绍如何使用HTML5和JavaScri ...
- Windows Store App JavaScript 开发:获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Win10系列:JavaScript写入和读取文件
正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文 ...
- Windows Store App JavaScript 开发:选取文件和文件夹
前面提到过,文件打开选取器由FileOpenPicker类表示,用于选取或打开文件,而文件夹选取器由FolderPicker类表示,用来选取文件夹.在FileOpenPicker类中,pickSing ...
- Windows Store App 获取文件及文件夹列表
通过使用13.2.1小节给出的方法和属性,不仅可以对用户库中的文件和文件夹进行操作,还可以获取其中所有的文件或者文件夹,比如为了完整地展现整个音乐库,可以获取并列举出音乐库中所有的音乐文件,以便能够在 ...
- 获取WINDOWS特殊文件夹
const// registry entries for special paths are kept in : REGSTR_PATH_SPECIAL_FOLDERS = REGSTR_PAT ...
- Android:创建文件或文件夹以及获取sd卡根目录
目录结构: 功能,可以根据录入的目录或者文件夹生成相应的文件或者文件夹 首先需要添加一个权限: <uses-permission android:name="android.permi ...
随机推荐
- 《剑指offer》第六十题(n个骰子的点数)
// 面试题60:n个骰子的点数 // 题目:把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s // 的所有可能的值出现的概率. #include <iostream> ...
- JNI开发-Java从C/C++获取List集合对象
NI开发有时需要Java从C/C++获取List对象,此篇主要讲解Java从C/C++获取List<Student>返回值; 1. 定义com.niubashaoye.simple.jni ...
- JavaScript学习第一天(一)
JavaScript介绍 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- Ubuntu vim终端常用的快捷键
Ubuntu中常用的快捷键 Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷 ...
- win下使用VM虚拟机安装Linux系统
自己电脑上还是有个自己的虚拟机比较方便,之前用的Ubuntu,发现卡得不行. 现在装了个轻量级的Lubuntu,速度提升了不少. 1.下载Lubuntu,安装. 2.进入,设置root密码,初始化ro ...
- Django初始化之基本操作
1.指定要安装的Django版本 C:\Users\win7>pip install Django==1.11.8 2.查看安装的django版本 C:\Users\win7>pip sh ...
- 【错误】IntelliJ IDEA使用Gradle编译报错
一.异常如下: No signature of method: org.gradle.api.internal.artifacts.ivyservice.ivyresolve.strategy.Def ...
- LeetCode--006--Z字型变换(java)
将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L C I R E T ...
- KM算法 带权二分匹配 O(n^3)
#include<cstdio> #include<cstdlib> #include<cstring> #include<string> #inclu ...
- Robot Movement(机器人移动)
中文标题[机器人移动] 这个题目是 Kayak 发布的代码挑战题目. 我认为题目本身描述的不是十分清楚,方法需要返回结果,但是结果没有说明是机器人最后的坐标位置,还是最后的坐标位置距离原点的距离.同时 ...