Win10系列：JavaScript写入和读取文件
正如上面的内容中所提到的，文件保存选取器用于保存文件，通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文件系统位置中保存一个文件。文件保存之后，还可以对其进行读写操作，如果是向文件中写入内容，可以使用Windows.Storage.FileIO类中的writeTextAsync(file, contents)函数或appendTextAsync(file,contents)函数来实现，参数file表示需要向其中写入内容的文件，contents代表要写入的内容，writeTextAsync函数会将新写入的内容代替文件原来的内容，而appendTextAsync函数是把新内容追加到原来的内容上。如果要从文件中读取内容，可以使用FileIO类中的readTextAsync(file)函数来实现，参数file表示需要被读取的文件。
下面以一个应用程序为例来演示如何对文件进行读写操作，这个应用程序可以实现保存一个文件，也可以向文件中写入内容和读取其中的内容。
新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为FileAccessApplication。打开default.html文件，在body元素中添加两个div元素，并在第一个div元素中添加一个h2元素、一个文本区和三个按钮，其中h2元素用来显示页面标题"写入和读取文件示例"，文本区用来编辑向文件中写入的内容，三个按钮为"新建一个文件"、"写内容"和"读内容"，分别用于新建文件、向文件中写入内容和读取文件中的内容；在第二个div元素中添加两个p元素，其中一个用来显示提示信息，另一个用于显示已读取的文件内容。相应的HTML代码片段如下所示：
<body>
<div>
<h2 class="articleTitle">写入和读取文件示例</h2>
<textarea rows="5" cols="10" id="textareaID"></textarea>
<br />
<button id="createFileButton" class="action1">新建一个文件</button>
<button id="writeFileButton" class="action2">写内容</button>
<button id="readFileButton" class="action3">读内容</button>
<br />
</div>
<div>
<p id="notice"></p>
<p id="readText"></p>
</div>
</body>
在上面的代码中，为了便于设计CSS样式和检索控件，在添加控件时为其设置了类名和ID。其中，设置"新建一个文件"、"写内容"和"读内容"三个按钮的class属性值分别为action1、action2和action3，id属性值分别为createFileButton、writeFileButton和readFileButton，并设置h2元素的class属性值为articleTitle，同时设置textarea控件和两个p元素的id属性值分别为textarea ID、notice和readText。
为了控制应用程序界面的显示外观，在default.css文件中添加如下代码来控制default.html页面的布局。
/*设置h2元素在应用程序界面中的显示位置*/
.articleTitle {
margin: 20px 15px 10px 70px;
}
/*设置textarea控件在界面中的显示位置*/
#textareaID {
margin: 20px 15px 10px 50px;
}
/*设置"新建一个文件"按钮和两个p元素在界面中的显示位置*/
.action1, #notice, #readText {
margin: 20px 15px 10px 30px;
}
/*设置"写内容"按钮在界面中的显示位置*/
.action2 {
margin: 20px 15px 10px 0px;
}
完成前台界面的布局后，应用程序界面效果如图19-19所示。
图19-19 前台界面效果图
布局好前台界面后，接下来介绍如何新建一个文件、向文件中写入内容以及读取文件中的内容。双击打开default.js文件，首先定义一个temporaryFile变量并初始化为null，用于保存新建的文件，以便对其进行读写操作，同时定义一个命名空间NameSpaceSample，并把temporaryFile变量添加到命名空间NameSpaceSample内。代码如下所示：
var temporaryFile = null;
WinJS.Namespace.define("NameSpaceSample", {
sampleFile: temporaryFile
});
在上面的代码中，将sampleFile指定为temporaryFile变量的别名，这样就可以通过命名空间和别名来引用temporaryFile变量，引用方法是NameSpaceSample.sampleFile。
下面在"args.setPromise(WinJS.UI.processAll());"语句后添加如下代码，分别为"新建一个文件"按钮、"写内容"按钮和"读内容"按钮注册click事件处理函数。
document.getElementById("createFileButton").addEventListener("click", CreateFile);
document.getElementById("writeFileButton").addEventListener("click", WriteFile);
document.getElementById("readFileButton").addEventListener("click", ReadFile);
首先以"createFileButton"为参数调用document对象的getElementById函数来查找id属性值为createFileButton的元素对象，并调用addEventListener函数为该元素对象的click事件注册事件处理函数CreateFile，之后通过相同的方法为id属性值分别为writeFileButton和readFileButton的元素对象注册名为WriteFile和ReadFile的click事件处理函数。下面分别来介绍事件处理函数CreateFile、WriteFile和ReadFile的实现代码。
CreateFile函数用来处理"新建一个文件"按钮的单击事件，实现新建一个文件。该函数的代码添加在default.js文件的"app.onactivated = function (args) {...};"语句后，对应的JavaScript代码片段如下所示：
function CreateFile() {
// 首先判断应用程序是否能够调用文件选取器
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
!Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
//如果文件选取器调用失败，则直接退出程序
return;
}
//新建一个文件保存选取器对象
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
//将文件保存选取器的起始位置设置为文档库
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// 设置文件类型筛选
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
savePicker.fileTypeChoices.insert("Word Document", [".doc"]);
savePicker.fileTypeChoices.insert("Word Document", [".docx"]);
// 设置文件的默认名称
savePicker.suggestedFileName = "New Document";
//调用pickSaveFileAsync函数来创建文件
savePicker.pickSaveFileAsync().then(function (file) {
//判断文件是否创建成功
if (file) {
//如果创建成功，给出相应的成功信息
notice.innerText = "文件 '" + file.name + "' 创建成功.";
//并将创建的文件保存到NameSpaceSample.sampleFile中，以便对其进行读写操作
NameSpaceSample.sampleFile = file;
} else {
//在文件选取器界面中，未创建文件而提前结束了操作
notice.innerText = "没有创建文件，操作取消了！";
}
});
}
在上面的代码中，首先通过Windows.UI.ViewManagement.ApplicationView.value获取应用程序的当前状态，如果应用程序正处于贴靠状态而且尝试取消贴靠失败，那么就不能显示文件选取器，程序停止向下执行。否则新建一个FileSavePicker类的对象savePicker作为文件保存选取器，通过savePicker对象的suggestedStartLocation属性设置文件保存选取器的起始位置为文档库，并使用fileTypeChoices属性获得选取器能够显示的文件类型集合，通过insert函数将.txt、.doc和.docx三种文件类型添加到集合中，接着使用suggestedFileName属性设置文件的默认名称为"New Document"。最后调用savePicker对象的pickSaveFileAsync函数来保存文件，pickSaveFileAsync函数调用完成之后定义一个匿名函数，在匿名函数中对参数file进行判断，如果file不是空对象，说明成功地创建了一个文件，那么在应用程序界面中显示相应的提示信息，并将file文件保存到NameSpaceSample.sampleFile中，如果file为空对象，说明没有创建文件，则在应用程序界面中显示"没有创建文件，操作取消了！"。
WriteFile函数用来处理"写内容"按钮的单击事件，实现向刚创建的文件中写入内容。该函数的代码添加在CreateFile函数后，对应的JavaScript代码片段如下所示：
function WriteFile() {
if (NameSpaceSample.sampleFile!== null) {
//从文本区中获取要向文件中写入的内容
var textArea = document.getElementById("textareaID");
var userContent = textArea.innerText;
//把获取到的文本内容写入文件中，并根据操作结果给出相应的提示信息
if (userContent !== "") {
Windows.Storage.FileIO.appendTextAsync(NameSpaceSample.sampleFile, userContent).done(function () {
//成功地向文件中写入内容
notice.innerText = "文本区中的内容已经被写到文件 '" + NameSpaceSample.sampleFile.name + "' 中了.";
});
}
else {
//写入空内容
notice.innerText = "文本区中的内容是空的，请先输入内容，然后再单击 '写内容' 按钮将内容写入到文件中！";
}
}
else {
//未先创建文件，就进行了写操作
notice.innerText = "文件还不存在，请先创建文件！";
}
}
代码中对NameSpaceSample.sampleFile进行判断，如果NameSpaceSample.sampleFile是空对象，说明要向其中写入内容的文件不存在，则在应用程序界面中显示"文件还不存在，请先创建文件！"。如果NameSpaceSample.sampleFile不是空对象，说明文件已经存在，那么以"textareaID"为参数调用document对象的getElementById函数来查找id属性值为textareaID的元素对象，并赋值给变量textArea，通过textArea变量调用该元素对象的innerText属性来获取要向文件中写入的内容，保存到变量userContent中，并对userContent变量进行判断，如果变量userContent为空，则在应用程序界面中显示"文本区中的内容是空的，请先输入内容，然后再单击 '写内容' 按钮将内容写入到文件中！"，如果变量userContent不为空，则以NameSpaceSample.sampleFile和userContent为参数调用FileIO类的appendTextAsync函数将内容userContent写入到文件NameSpaceSample.sampleFile中。appendTextAsync函数调用完成后定义一个匿名函数，用于在应用程序界面中显示相应的提示信息。
ReadFile函数用来处理"读内容"按钮的单击操作，实现从文件中读取内容。该函数的代码添加在WriteFile函数后，相应的JavaScript代码片段如下所示：
function ReadFile() {
if (NameSpaceSample.sampleFile!== null) {
//从文件中读取内容，并根据操作结果给出相应的提示信息
Windows.Storage.FileIO.readTextAsync(NameSpaceSample.sampleFile).done(function (fileContent) {
if(fileContent === ""){
//空文件，给出相应的提示信息
notice.innerText = "文件中的内容是空的！"
}else{
//文件不空，也给出相关的提示信息并显示读取的内容
notice.innerText = "文件 '" + NameSpaceSample.sampleFile.name + "'中的内容为:";
readText.innerText = fileContent;}
});
}
}
在上面的代码中，先对NameSpaceSample.sampleFile进行判断，如果NameSpaceSample.sampleFile不是空对象，说明要读取的文件存在，那么以NameSpaceSample.sampleFile为参数调用FileIO类的readTextAsync函数来从文件NameSpaceSample.sampleFile中读取内容，readTextAsync函数调用完成后定义一个匿名函数，在这个匿名函数中对参数fileContent进行判断，如果fileContent为空，则将id属性值为notice的元素对象的innerText属性赋值为"文件中的内容是空的！"，如果fileContent不为空，将fileContent赋值给id属性值为readText的元素对象的innerText属性，从而在应用程序界面中显示读取的文件内容。
启动调试，单击"新建一个文件"按钮，会显示文件选取器窗口，这里在文档库中采用默认名称新建一个文本文件，如图19-20所示。文件的类型和名称确定之后，单击"保存"按钮，会返回到应用程序界面，界面中会显示"文件 'New Document.txt' 创建成功."，这样就成功创建并保存了这个文件。然后，在文本区中输入"这是一个新建文件、写入和读取文件的例子。"，单击"写内容"按钮，就将文本区中的内容写入到了刚才创建的文件中，同时界面上会显示提示信息"文本区中的内容已经被写到文件
'New Document.txt' 中了."，效果如图19-21所示。如果想读取文件中的内容，单击"读内容"按钮，文件中的内容就会显示在界面下方，效果如图19-22所示。
图19-20 文件选取器界面
图19-21 成功向文件中写入内容的效果
图19-22 成功读取文件内容的效果
Win10系列：JavaScript写入和读取文件的更多相关文章
- UWP入门（十）--创建、写入和读取文件
原文:UWP入门(十)--创建.写入和读取文件 核心的 API github代码 StorageFolder 类 StorageFile 类 FileIO 类 使用 StorageFile 对象读取和 ...
- js创建、写入、读取文件(转)
下面是对此知识的系统介绍(转自互联网): Javascript 是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和 ...
- Javascript - 异步操作和读取文件
node.js读取文件 node.js内置了异步读取文件的模块,可以很方便地读取文件的数据.先创建三个txt文档,在根目录下创建一个readFile.js 输入以下代码,然后在vscode的终端中输入 ...
- Python序列化模块-Pickel写入和读取文件
利用pickle 存储和读取文件 1.存储文件: #引入所需包,将列表元素存入data2的文件里面 import pickle mylist2 ={'1','nihao','之后','我们',1,2, ...
- [转]java按指定编码写入和读取文件内容的类
读文件: BufferedReader 从字符输入流中读取文本,缓冲各个字符,从而提供字符.数组和行的高效读取. 可以指定缓冲区的大小,或者可使用默认的大小.大多数情况下,默认值就足够大了. 通常,R ...
- php写入和读取文件内容
function read_file($filename){ // $filename = "/usr/local/something.txt"; $handle = @fopen ...
- 【原】Python 用例：二进制写入和读取文件内容
import pickle as p shoplistfile='shoplist.data' shoplist=['apple','carrot'] # because the dump opera ...
- 在外部存储器上写入或读取文件(Environment类、File类的使用)
1.Environment类 简单介绍:http://www.cnblogs.com/mengdd/p/3742623.html 详细介绍:http://www.2cto.com/kf/201408/ ...
- Javascript写入txt和读取txt文件的方法
文章主要介绍了Javascript写入txt和读取txt文件的方法,需要的朋友可以参考下1. 写入 FileSystemObject可以将文件翻译成文件流. 第一步: 例: 复制代码 代码如下: Va ...
随机推荐
- web自动化测试与Appuim自动化测试对比
web自动化测试-打开浏览器: from selenium import webdriver driver = webdriver.Chrome() #定义chrome驱动 driver.maximi ...
- maven项目, 单元测试失败提示 Class not found datastorage........
---恢复内容开始--- 单元测试失败: 提示 Class not found datastorage........ 原因: maven 环境变量问题, eclipse 没有自动更新下载 ...
- 使用Hexo搭建一个简单的博客（一）
搭建好简洁的博客框架后,回看时发现,简洁之中透露着一丝丝简陋,好的,网上关于丰富hexo的文章也很多 记录一下自己的一些瞎操作. 在你的hexo目录下,你可以看到themes文件夹里有个默认的land ...
- 关于vue2.0获取后端数据
一.通过vue-rource完成异步请求: 其用法跟ajax用法差不多,也就是改变了一些语法格式.从获取路径到值的获取都是一样的,但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而v ...
- MYSQL常用函数（聚合函数(常用于GROUP BY从句的SELECT查询中)）
AVG(col)返回指定列的平均值 COUNT(col)返回指定列中非NULL值的个数 MIN(col)返回指定列的最小值 MAX(col)返回指定列的最大值 SUM(col)返回指定列的所有值之和 ...
- html+css+js实现类似音乐app似的列表播放
最近做了一个类似于音乐app里面列表播放的功能,主要是音频播放和按钮状态的联动: 界面如下: 如上图所示 上面有一个播放按钮 下面有一个播放列表 上面还有一个歌曲长度的总时长 上面一个按钮能控制下面所 ...
- Notepad++ 的资源管理器 右键菜单
以前装的版本,右键[Edit With Notepad++]都可以出来的. 最近安装的总是不行. 不知道是Windows的原因,还是新版本的原因. 网上也都是用workaround去解决的. 免费的东 ...
- change color
关于DataGridView行和列的背景色-前景色设置 1.设定DataGridView全部单元格的Style DataGridView内所有单元格的Style变更,可以使用DataGridVie ...
- 第十二周（MySort）
注意:研究sort的其他功能,要能改的动代码,需要答辩 模拟实现Linux下Sort -t : -k 2的功能. 要有伪代码,产品代码,测试代码(注意测试用例的设计) 参考 Sort的实现.提交博客链 ...
- 常用音频协议介绍&&有关音频编码的知识与技术参数
(转载)常用音频协议介绍 会议电视常用音频协议介绍及对比白皮书 一.数字化音频原理:声音其实是一种能量波,因此也有频率和振幅的特征,频率对应于时间轴线,振幅对应于电平轴线.通常人耳可以听到的频率在20 ...