在实际开发中经常会遇到访问文件的情况，因此学习与文件有关的操作对程序开发很有帮助，关于文件操作的一些基本技术，在前面章节中有专门基于C#语言的详细讲解，本节主要介绍如何使用HTML5和JavaScript开发具有文件操作功能的Windows应用商店应用，首先来了解一下用于对文件或文件夹进行操作的文件选取器。

19.4.1 文件选取器

正如前面章节C#语言中所介绍的，文件选取器是应用与系统进行交互的一个接口，通过文件选取器可以在应用中直接与文件系统进行交互，访问不同位置的文件或文件夹，或者将文件存储在指定位置。文件选取器分为对文件进行操作的选取器和对文件夹进行操作的选取器。对文件进行操作的选取器包含文件打开选取器和文件保存选取器，文件打开选取器由FileOpenPicker类表示，用来选取或打开文件；文件保存选取器由FileSavePicker类表示，用来向指定的文件系统位置中保存文件。对文件夹进行操作的选取器由FolderPicker类表示，用于选取文件夹。这三个类均位于Windows.Storage.Pickers命名空间下。

对于上面这三类文件选取器，选取器界面中都含有如下内容：

  • 起始位置：初始的文件系统位置。
  • 下拉符号：单击下拉符号，可以从下拉列表中选择其他的文件系统位置，例如文档库、桌面、计算机等。
  • 返回上一级：用于返回到父级目录。
  • 排序：对文件系统位置下的项目进行排序，包括按日期排序和按名称排序。
  • 项目列表：文件系统位置下的所有项目。

在应用程序中当需要调用文件选取器时，首先要判断该应用程序是否能够显示它，判断方法是通过Windows.UI.ViewManagement.ApplicationView.value获取应用程序的当前状态，如果应用程序处于贴靠状态，而且通过tryUnsnap函数尝试取消贴靠失败，那么就不能显示文件选取器。代码如下例所示：

function OpenFile() {

var currentState = Windows.UI.ViewManagement.ApplicationView.value; /*获取应用程序的当前状态*/

if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&

!Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {

return; /*如果应用程序处于贴靠状态而且未能取消贴靠，则不可以显示文件选取器，函数直接返回，不执行下面的操作*/

}

//创建文件打开选取器对象

var filePicker = new Windows.Storage.Pickers.FileOpenPicker();

//设置文件打开选取器的视图模式

filePicker.viewMode = Windows.Storage.Pickers.PickerViewMode.list;

}

19.4.2 选取文件和文件夹

前面提到过，文件打开选取器由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选取文件夹的效果

如果在文件选取器界面中未选取任何文件或文件夹就单击"取消"按钮结束了操作，那么应用程序界面中会显示提示信息"没有选取文件，操作取消了！"或"没有选取文件夹，操作取消了！"。

Win10系列：JavaScript访问文件和文件夹的更多相关文章

  1. Win10系列：JavaScript获取文件和文件夹列表

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

  2. WIN7 WIN10赋予文件或者文件夹完全访问权限

    WIN7 WIN10赋予文件或者文件夹完全访问权限win7文件夹图标中多了一把小锁打不开文件夹怎么办?解决办法一:右击目录→取得管理员权限!该方法适用于win7旗舰版.解决办法二:添加everyone ...

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

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

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

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

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

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

  6. 如何为基于windows验证的站点的某个页面、文件或文件夹单独设置匿名访问

    在MOSS的项目中,我们经常碰到要单独为基于windows验证的站点的某个页面.文件或文件夹单独设置匿名访问即不登录就可以直接访问.比如说站点的A的某些图片或文件URL存在B站点下的文件夹下.此时访问 ...

  7. 让Win10显示系统中隐藏的文件夹

    让Win10显示系统中隐藏的文件夹.. ------------------------- -----------------------

  8. 开源一款强大的文件服务组件（QJ_FileCenter）（系列三 访问接口与项目集成）

    系列文章 1. 开源一款强大的文件服务组件(QJ_FileCenter)(系列一) 2. 开源一款强大的文件服务组件(QJ_FileCenter)(系列二 安装说明) 3. 开源一款强大的文件服务组件 ...

  9. SharePoint服务器端对象模型 之 访问文件和文件夹（Part 1）

    本节中所阐述的内容,主要适用于SharePoint文档库中的文件和文件夹,以及列表中的文件夹.系统中的其他文件(如_layouts中的文件.配置文件.程序文件等)不在本章节的讨论范围之内.   (一) ...

随机推荐

  1. vue中的slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...

  2. python 安装包

    一般python的包都是.tar.gz结尾的压缩包,据说是linux下面的格式.但也是可以在windows上面安装的,安装过程,1,在 https://pypi.python.org/pypi 这个网 ...

  3. leecode第八十八题（合并两个有序数组）

    class Solution { public: void merge(vector<int>& nums1, int m, vector<int>& nums ...

  4. Android开发 打开已存在的项目（以虹软人脸识别sdk的demo为例）

    详细流程参考博客https://blog.csdn.net/z979451341/article/details/79468785 个人遇到的问题与注意点 1.下载Demo后忘记修改appid和sdk ...

  5. bitbucket工程改名导致 repository does not exist. fatal: Could not read from remote repository.

    在bitbucket上把工程改名了,就忘了. 结果同步时报错. 先在本地查看一下 git remote -v 果然是工程的老名字 origin git@bitbucket.org:XXX/oldnam ...

  6. kbengine学习1 安装

    KBengine一年前就知道了,但是没来得及学(只记得是C++ + python脚本),前一个项目unity3d+fkask+socketio+sqlite硬怼出来的.这半年也没来得及管.(好像当时看 ...

  7. cocos2dx AudioEngine在Android7上播放音效卡顿问题处理

    1.此问题在cocos2dx 3.13/3.14版本(其它版本没有测试过)在Android7中使用AudioEngine的play2d函数播放音效时出现. 调试时出现如下提示: 2.论坛中相关讨论帖地 ...

  8. IOException parsing XML document from class path resource [WebRoot/WEB-INF/applicationContext.xml];

    parsing XML document from class path resource [applicationContext.xml]; nested exception is java.io. ...

  9. Angular 学习笔记 ( timezone + moment + material date-picker + date pipe + asp.net core )

    参考 : https://stackoverflow.com/questions/29979609/time-conversion-with-timezoneinfo-for-past-years h ...

  10. SublimeText3按ctrl+b执行python无反应

    现象:在Sublime中打开.py文件,按”ctrl+b”执行时无反应.点击工具->编译系统中已经有且识别到Python,但执行”run(ctrl+shift+b)”时无反应,Sublime左下 ...