Win10系列: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-11-06 22:42:54

Win10系列:JavaScript获取文件和文件夹列表的相关文章

Win10系列:JavaScript访问文件和文件夹

在实际开发中经常会遇到访问文件的情况,因此学习与文件有关的操作对程序开发很有帮助,关于文件操作的一些基本技术,在前面章节中有专门基于C#语言的详细讲解,本节主要介绍如何使用HTML5和JavaScript开发具有文件操作功能的Windows应用商店应用,首先来了解一下用于对文件或文件夹进行操作的文件选取器. 19.4.1 文件选取器 正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存

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

在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolders类的相应属性来实现,可用属性包括documentsLibrary(文档库).musicLibrary(音乐库)和videosLibrary(视频库)等.获取到用户库之后,就可以使用KnownFolders类中的getItemsAsync.getFilesAsync或getFoldersAsync函

Win10系列:JavaScript写入和读取文件

正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文件系统位置中保存一个文件.文件保存之后,还可以对其进行读写操作,如果是向文件中写入内容,可以使用Windows.Storage.FileIO类中的writeTextAsync(file, contents)函数或appendTextAsync(file,contents)函数来实现,参数file表示

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

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

Javascript获取文件自身URL路径

使用以下Javascript代码即可获取Javascript文件自身所在URL路径. var js = document.scripts; var url =js[js.length - 1].src; 如果需要获取Javascript文件所在文件夹,可以执行以下代码.如果想再获取上一层的文件夹,再执行一次下面的代码即可. url = url.substring(0, url.lastIndexOf('/')); 例如在本地服务器环境的根目录下,建立一个Javascript文件夹,在其中放一个i

Win10系列:VC++ XML文件解析

XML文件按照元素标记来存储数据,通过遍历这些元素标记可以得到XML文件中所保存的数据.在C++/CX的类库中并未定义用于解析XML文件的类,但C++提供了能解析XML文件的框架和类库,如msxml4.libxml.IXMLDOM和TinyXML等,在使用C++/CX编写应用程序时可以通过C++提供的框架和类库来解析XML文件.TinyXML是一个轻量级解析XML的框架,本节将介绍如何使用此框架来解析一个XML文件. TinyXML框架包含了以下的类和函数,通过使用这些类和函数可以方便地读取一个

获取本地文件(文件夹)上传,无点击事件

//url,realPath必填参数 1 public String updatebendi()throws Exception{ 2 ServletContext servletContext = ServletActionContext.getServletContext(); 3 //获取项目根目录路径 4 //String realPath= servletContext.getRealPath("/")+"image/yyy/yuangong"; 5 St

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

目录结构: 功能,可以根据录入的目录或者文件夹生成相应的文件或者文件夹 首先需要添加一个权限: <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> MainActivity.java: package com.wyl.xml; import com.wyl.download.FileUtils; import android.app.Activity; import andr

递归获取指定盘符下的所有文件及文件夹

 /// <summary>         /// 递归获取指定盘符下的所有文件及文件夹         /// 存在部分文件夹访问权限问题         /// </summary>         /// <param name="path">string path = @"G:\"; </param>         /// <param name="filter">strin