Windows Store App JavaScript 开发：选取文件和文件夹
前面提到过，文件打开选取器由FileOpenPicker类表示，用于选取或打开文件，而文件夹选取器由FolderPicker类表示，用来选取文件夹。在FileOpenPicker类中，pickSingleFileAsync函数用于选取单个文件，pickMultipleFilesAsync函数用于选取多个文件；而FolderPicker类中只有一个pickSingleFolderAsync函数，用来选取单个文件夹。下面以一个应用程序为例来演示如何选取文件或文件夹。
新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为FilePickerApplication。打开default.html文件，在body元素中定义两个div元素，并在第一个div元素中添加一个h2元素和两个按钮，其中，h2元素用于显示页面标题“使用文件选取器选取文件和文件夹”，两个按钮分别为“选取一个文件”和“选取一个文件夹”，“选取一个文件”按钮用来选取文件，“选取一个文件夹”按钮用来选取文件夹；在第二个div元素中添加一个p元素，用于显示提示信息。相应的HTML代码片段如下所示：
<body>
<div>
<h2 class="articleTitle">使用文件选取器选取文件和文件夹</h2>
<br />
<button class="action" id="pickFile">选取一个文件</button>
<button class="action" id="pickFolder">选取一个文件夹</button>
<br />
<br />
</div>
<div>
<p id="outputText"></p>
</div>
</body>
在上面的代码中，为了便于设计CSS样式和检索控件，在添加控件时为其设置了类名和ID。其中，设置h2元素的class属性值为articleTitle，“选取一个文件”和“选取一个文件夹”两个按钮的class属性值均为action；同时，设置这两个按钮和p元素的id属性值分别为pickFile、pickFolder和outputText。
为了控制应用程序界面的显示外观，在default.css文件中添加如下代码来设置default.html页面的外观。
/*设置h2元素的字体大小和在应用程序界面中的显示位置*/
.articleTitle {
font-size: x-large;
margin: 20px 15px 10px 30px;
}
/*设置class属性值为action的控件在界面中的显示位置*/
.action {
margin: 0px 15px 10px 57px;
}
/*设置p元素在界面中的显示位置*/
#outputText {
margin: 20px 15px 10px 30px;
}
完成前台界面的布局后，应用程序界面效果如图19-13所示。
图19-13 前台界面效果图
布局好前台界面后，接下来介绍如何实现选取一个文件和一个文件夹。打开default.js文件，在“args.setPromise(WinJS.UI.processAll());”语句后添加如下代码，为“选取一个文件”按钮和“选取一个文件夹”按钮注册click事件处理函数。
document.getElementById("pickFile").addEventListener("click", PickSingleDocument);
document.getElementById("pickFolder").addEventListener("click", PickSingleFolder);
首先以“pickFile”为参数调用document对象的getElementById函数来查找id属性值为pickFile的元素对象，并使用addEventListener函数为该元素对象的click事件注册事件处理函数PickSingleDocument，接着通过相同的方法为id属性值为pickFolder的元素对象注册click事件处理函数PickSingleFolder。下面分别来看一下事件处理函数PickSingleDocument和PickSingleFolder的实现代码。
PickSingleDocument函数用来处理“选取一个文件”按钮的单击事件，实现从文件系统中选取一个文件。该函数的代码添加在default.js文件的“app.onactivated = function (args) {...};”语句后，相应的JavaScript代码片段如下所示：
function PickSingleDocument() {
//判断应用程序是否能够显示文件选取器
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
!Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
return;
}
//定义一个FileOpenPicker类型的对象
var filePicker = new Windows.Storage.Pickers.FileOpenPicker();
//设置文件选取器的视图模式
filePicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;
//设置文件选取器的起始位置为文档库
filePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
//设置文件类型筛选
filePicker.fileTypeFilter.replaceAll([".txt", ".doc", ".docx"]);
//调用pickSingleFileAsync函数从文件选取器中选取文件
filePicker.pickSingleFileAsync().then(function (file) {
//针对操作结果给出相应的提示信息
if (file) {
// 文件选取成功时显示文件的名称
outputText.innerText = "选取的文档是: " + file.name;
} else {
//在文件选取器界面中，未选取任何文件就取消了操作
outputText.innerText = "没有选取文件，操作取消了！";
}
});
}
在上面的代码中，首先通过Windows.UI.ViewManagement.ApplicationView.value获取应用程序的当前状态，如果应用程序正处于贴靠状态而且尝试取消贴靠失败，那么就不能显示文件选取器，程序停止向下执行；否则新建一个FileOpenPicker类的对象filePicker作为文件选取器，并通过viewMode属性和suggestedStartLocation属性分别设置文件选取器的视图模式为列表模式、起始位置为文档库，同时使用fileTypeFilter属性中的replaceAll函数设置文件选取器中可显示的文件类型，本示例包括.txt、.doc、和.docx文件；最后调用filePicker对象的pickSingleFileAsync函数通过文件选取器选取文件，pickSingleFileAsync函数调用完成之后定义一个匿名函数，在匿名函数中对参数file进行判断，如果file不是空对象，说明成功地选取了一个文件，则在应用程序界面中显示选取的文件，如果file为空对象，说明没有选取到文件，则在应用程序界面中显示“没有选取文件，操作取消了！”。
PickSingleFolder函数用来处理“选取一个文件夹”按钮的单击事件，实现从文件系统中选取一个文件夹。该函数的代码添加在PickSingleDocument函数后，相应的代码片段如下所示：
function PickSingleFolder() {
// 首先判断应用程序是否能够显示文件选取器
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
!Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
return;
}
// 定义一个FolderPicker类型的对象
var folderPicker = new Windows.Storage.Pickers.FolderPicker;
//设置文件选取器的起始位置为桌面
folderPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.desktop;
//设置文件类型筛选
folderPicker.fileTypeFilter.replaceAll([".docx", ".doc", ".xlsx", ".pptx"]);
//调用pickSingleFolderAsync函数从文件选取器中选取文件夹
folderPicker.pickSingleFolderAsync().then(function (folder) {
//针对操作结果，给出相应的提示信息
if (folder) {
//文件夹选取成功时，显示文件夹的名称
outputText.innerText = "选取的文件夹是: " + folder.name;
} else {
//在文件选取器界面中，未选取任何文件夹就取消了操作
outputText.innerText = "没有选取文件夹，操作取消了！";
}
});
}
该函数的代码实现与PickSingleFolder函数很相似，同样是首先通过Windows.UI.ViewManagement.ApplicationView.value获取应用程序的当前状态，并对其进行检查，如果应用程序正处于贴靠状态而且尝试取消贴靠失败，那么就不能显示文件选取器，程序停止向下执行；否则新建一个FolderPicker类的对象folderPicker作为文件选取器，并通过suggestedStartLocation属性设置文件选取器的起始位置为桌面，同时使用fileTypeFilter属性中的replaceAll函数设置文件选取器中可显示的文件类型，本示例包括.docx、.doc、.xlsx和.pptx文件；最后调用folderPicker对象的pickSingleFolderAsync函数通过文件选取器选取文件夹，pickSingleFolderAsync函数调用完成之后定义一个匿名函数，在匿名函数中对参数folder进行判断，如果folder不是空对象，说明成功地选取了一个文件夹，那么在应用程序界面中显示所选取的文件夹，如果folder是空对象，说明没有选取到文件夹，则在应用程序界面中显示“没有选取文件夹，操作取消了！”。
启动调试，单击“选取一个文件”按钮，将显示文件选取器窗口，如图19-14所示，可以看到，起始位置为文档库，而且“打开”按钮是灰色的，表示现在不可用。假设想选取桌面上的“多媒体.docx”文件，那么单击“文件”旁边的下拉符号，在下拉列表中选择“桌面”，在项目列表位置就会显示桌面上的内容，然后选中文档“多媒体.docx”，这时“打开”按钮变为可用，单击它就选取了这个文档，得到的效果如图19-15所示。
单击“选取一个文件夹”按钮，此时文件选取器的界面与图19-14中的稍有不同，起始位置是桌面，“打开”按钮换成了“选择这个文件夹”按钮。假设想选取桌面上的“Demo”文件夹，那么选中它，然后单击“选择这个文件夹”按钮，“Demo”文件夹就会显示在文件选取器界面的底端，这时“选择这个文件夹”按钮变成了“确定”按钮，最后单击“确定”按钮回到应用程序界面，得到的效果如图19-16所示。
图19-14 文件选取器界面
图19-15 选取文件的效果
图19-16选取文件夹的效果
如果在文件选取器界面中未选取任何文件或文件夹就单击“取消”按钮结束了操作，那么应用程序界面中会显示提示信息“没有选取文件，操作取消了！”或“没有选取文件夹，操作取消了！”。
Windows Store App JavaScript 开发：选取文件和文件夹的更多相关文章
- Windows Store App JavaScript 开发：文件选取器
正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...
- Windows Store App JavaScript 开发：获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Windows Store App JavaScript 开发：小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- Windows Store App JavaScript 开发：简单对象绑定
简单对象绑定是一种基本的绑定类型,可以实现将一个对象中的数据绑定到HTML元素的属性.下面通过一个示例来演示如何使用HTML5和JavaScript开发一个实现简单对象绑定的Windows应用商店应用 ...
- Windows Store App JavaScript 开发：页内导航
页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
- Windows Store App JavaScript 开发：模板绑定
WinJS库模板提供了一种格式化显示多条数据的便捷方式,通过这种方式可以将模板与ListView或FlipView等控件结合使用以控制数据的显示格式.定义一个WinJS库模板的方法与定义WinJS库控 ...
- Windows Store App JavaScript 开发：页面加载
在开发基于JavaScript的Windows应用商店应用时,可以使用HtmlControl和PageControl控件加载一个页面,这两个WinJS库控件曾在上面的内容中提到过,HtmlCont ...
- Windows Store App JavaScript 开发：WinJS库控件
在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后,下面来着重介绍WinJS库中几种常用的控件. (1)ListView控件 在开发Windows应用商店应用时可以使用ListVie ...
- Windows Store App Image开发示例
通过上面的介绍,读者已经了解了Image对象及ImageBrush对象的使用方法和常用属性,在实际的开发工作中,比较常用的是Image对象,下面以一个幼儿园识物识字卡应用为例,来帮助读者更好的理解Im ...
随机推荐
- CSS的应用
CSS基础入门 目录 一. 列表.................................................................................. ...
- Oracle instr
instr函数 instr函数在Oracle/PLSQL中是返回要截取的字符串在源字符串中的位置.instr是一个非常好用的字符串处理函数,几乎所有的字符串分隔都用到此函数. 作 用 返回 ...
- Uva 1630 折叠串
题目链接:https://uva.onlinejudge.org/external/16/1630.pdf 题意:折叠串,给一个字符串,相同部分可以折叠,折叠可以嵌套.求最短长度的一种折叠方法.括号和 ...
- MVC的多表单
中心思想就是在一个表单内不规定"action",在js里面用@Url.Axtion("视图层","控制器")方法来设置表单的传值. 控制器 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- android listview simpleAdaper
xml (主) <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns: ...
- 年终汇报、总结、述职：教你做一场B格满满的技术大会演讲
什么样的演讲和呈现最受听众欢迎,内容干货?逻辑清晰?长相帅气? 偶尔被邀作为speaker参加一些圈内的技术大会进行演讲.这里我分享下自己的经验,如何做一场B格满满的技术大会演讲,希望给做汇报.总结. ...
- android中的位置服务（LBS）
自己的位置:LocationManager 基本用法:创建实例:LocationManager locationManager = (LocationManager)getSystemService ...
- UVA 11384 正序数排列
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 特殊符号 && 和 ||
一.值为false的情况 如果逻辑对象值为0,-0, null,undefined,false,"",NaN.那么值为false. 二.&& || 的 理解 1.& ...