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选取文件夹的效果
如果在文件选取器界面中未选取任何文件或文件夹就单击“取消”按钮结束了操作,那么应用程序界面中会显示提示信息“没有选取文件,操作取消了!”或“没有选取文件夹,操作取消了!”。
转载于:https://www.cnblogs.com/finehappy/p/4234912.html
Windows Store App JavaScript 开发:选取文件和文件夹相关推荐
- Windows Store App JavaScript 开发:获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- Windows Store App JavaScript 开发:小球运动示例
通过前面内容的学习,相信读者已经对开发基于JavaScript的Windows应用商店应用有了一定的了解,本小节通过一个小球运动的示例来介绍如何新建一个JavaScript的Windows应用商店项目 ...
- Windows Store App 获取文件及文件夹列表
通过使用13.2.1小节给出的方法和属性,不仅可以对用户库中的文件和文件夹进行操作,还可以获取其中所有的文件或者文件夹,比如为了完整地展现整个音乐库,可以获取并列举出音乐库中所有的音乐文件,以便能够在 ...
- Windows Store App 音频和视频
在Windows应用商店应用中提供了MediaElement控件,该控件能为应用提供音频和视频播放功能.就像之前提到的,虽然在多媒体应用开发中,开发人员可以自行开发一套音频.视频编解码规范和开发媒体播 ...
- Windows Store App 图像
在Windows应用商店应用中可以使用两种方法来显示图片,这两种方法分别为使用Image对象和使用ImageBrush对象.Image对象可以直接呈现一幅图像,而ImageBrush对象则可以用一幅图 ...
- C# Windows Phone 8 WP8 开发,将WebClient的DownloadStringCompleted事件改成非同步的awiat方法。...
C# Windows Phone 8 WP8 开发,将WebClient的DownloadStringCompleted事件改成非同步的awiat方法. 原文:C# Windows Phone 8 W ...
- 如何将Windows 10帐户还原为本地帐户(在Windows Store劫持它之后)
If your Windows 10 user account is currently a Microsoft account (by your choice or because you got, ...
- 09、win32 转换为 store app
1.机制: 微软的 Project Centernial ( Project C) 项目的就是把传统的 windows桌面应用程序 转换为 windows10 store app (appx). 目的 ...
- Unity for Windows: II – Publishing Unity games to Windows Store
原地址:http://digitalerr0r.wordpress.com/2013/08/27/unity-for-windows-ii-publishing-to-windows-8/ Windo ...
- 【万里征程——Windows App开发】文件数据——文件选取器
使用文件选取器保存文件 就我个人而言,还是非常喜欢使用文件选取器的,因为能够用自己的代码来调用系统的各种弹框. 在这个示例中,首先在XAML中添加一个Button和一个TextBlock,分别命名为b ...
最新文章
- 词移距离 Word Mover‘s Distance
- C++11中值得关注的几大变化 .
- 有没有一种简单的方法可以按值删除列表元素?
- eclipse 的习惯配置
- Java中vector的用法
- 20190403vim编辑器week1_day3
- SVN之如何添加默认.a文件
- 聚焦四大领域,恒生电子发布2022年金融科技技术与应用趋势
- 如何写Java单元测试
- 如何实现代码自动生成?
- 关于我的家乡介绍网站设计—— 大连介绍(6页) 网页设计作业 / 家乡网页设计作业,网页设计作业 / 家乡网页设计成品,网页设计作业 / 我的家乡网页设计成品模板下载
- 【Java】PAT乙级真题全记录(二)21到40题
- 概率论与数理统计学习笔记(3)——Pearson相关系数与Spearman相关系数
- Android notes
- 山东省计算机应用能力考核初级,山东省计算机应用能力考核1.doc
- React-Native全球化语言切换工具库react-native-i18n
- WGCLOUD默认登录账号密码是什么
- 30条人生经验分享~(摘录)
- SpringCloud搭建分布式服务架构(通俗易懂,步骤清晰)
- 2021年9月计算机二级考试成绩查询常见问题
热门文章
- 虚拟化四路服务器,IDC:4路及8路服务器现状未来趋势分析
- spark shuffle流程入门
- 03JavaScript程序设计修炼之道_2019-06-18_21-41-56_事件onfocus
- java使用jeids实现redis2.6的HyperLogLog数据结构的操作
- Javascript:谈谈JS的全局变量跟局部变量
- 添加、移除事件及相关处理函数各方法
- Android Screen Orientation
- 使用WinIO库实现保护模式下的IO和内存读写(_inp,_outp)
- sqlserver 列出表字段和字段说明
- SpringMVC 工作流程