问题域：
javascript 如何操作本地文件（创建，更新）；
解析：
javascript对服务器端的文件操作只要传输数据就可以了，具体的文件创建，删除，更新操作交给服务端的java代码就可以了。
但是对本地的文件操作就有点麻烦了，因为javascript为了安全不许直接对本地文件进行写的操作。但是可以读取。
方案：采用 ActiveXObject来读取xml文件
- var xmlDoc;
- function loadXML() {
- // code for IE
- if (window.ActiveXObject) {
- xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
- xmlDoc.async=false;
- xmlDoc.load("c:\\myjstest.xml");
- getmessage();
- }
- // code for Mozilla, Firefox, Opera, etc.
- else if (document.implementation
- &&document.implementation.createDocument){
- xmlDoc=document.implementation
- .createDocument("","",null);
- xmlDoc.load("c:\\myjstest.xml");
- xmlDoc.onload=getmessage;
- } else {
- alert(\'Your browser cannot handle this script\');
- }
- }
- function getmessage() {
- document.getElementById("to").innerHTML = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
- document.getElementById("from").innerHTML = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
- document.getElementById("message").innerHTML= xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
- }
注意：读取可以兼容其他主流浏览器
方案二：FileSystemObject对象有读写
- var fso = new ActiveXObject("Scripting.FileSystemObject");
- var f1 = fso.CreateTextFile("c:\\myjstest.xml", true);//"true"
- f1.WriteLine("<?xml version=\"1.0\" encoding=\"UTF-8\"?> ");
- f1.WriteLine("<root>");
- f1.WriteLine("<to>huguoqing</to>");
- f1.WriteLine("<from>126</from>");
- f1.WriteLine("<body>Hello word!</body>");
- f1.WriteLine("</root>");
- f1.WriteBlankLines(2);//写入两个空行
- f1.Close();
- var ForReading = 1; //读的标志位1
- var fsource = fso.OpenTextFile("c:\\myjstest.xml", ForReading);
- fcontent = fsource.ReadLine();
- alert("File contents ="+fcontent);
- ts.Close();
注意：如果是IE浏览器会有安全提示的对话框弹出询问。执行操作。
如果是其他浏览器则提示报错，代码不执行。
参考资料：
一、功能实现核心：FileSystemObject 对象
其实，要在Javascript中实现文件操作功能，主要就是依靠FileSystemobject对象。在详细介绍FileSystemobject对象的各个属性和方法的使用细节前，先来看看这个对象包括哪些相关对象和集合：
二、FileSystemObject编程三部曲
使用FileSystemObject 对象进行编程很简单，一般要经过如下的步骤： 创建FileSystemObject对象、应用相关方法、访问对象相关属性 。
（一）创建FileSystemObject对象
创建FileSystemObject对象的代码只要1行：
var fso = new ActiveXObject("Scripting.FileSystemObject");
上述代码执行后，fso就成为一个FileSystemObject对象实例。
（二）应用相关方法
创建对象实例后，就可以使用对象的相关方法了。比如，使用CreateTextFile方法创建一个文本文件：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.createtextfile("c:\myjstest.txt",true");
（三）访问对象相关属性
要访问对象的相关属性，首先要建立指向对象的句柄，这就要通过get系列方法实现：GetDrive负责获取驱动器信息，GetFolder负责获取文件
夹信息，GetFile负责获取文件信息。比如，指向下面的代码后，f1就成为指向文件c: est.txt的句柄：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.GetFile("c:\myjstest.txt");
然后，使用f1访问对象的相关属性。比如：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.GetFile("c:\myjstest.txt");
alert("File last modified: " + f1.DateLastModified);
执行上面最后一句后，将显示c:myjstest.txt的最后修改日期属性值。
但有一点请注意：对于使用create方法建立的对象，就不必再使用get方法获取对象句柄了，这时直接使用create方法建立的句柄名称就可以：
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f1 = fso.createtextfile("c:\myjstest.txt",true");
alert("File last modified: " + f1.DateLastModified);
三、操作驱动器（Drives）
使用FileSystemObject对象来编程操作驱动器（Drives）和文件夹（Folders）很容易，这就象在Windows文件浏览器中对文件进行交互操作一样，比如：拷贝、移动文件夹，获取文件夹的属性。
（一）Drives对象属性
Drive对象负责收集系统中的物理或逻辑驱动器资源内容，它具有如下属性：
l TotalSize：以字节（byte）为单位计算的驱动器大小。
l AvailableSpace或FreeSpace：以字节（byte）为单位计算的驱动器可用空间。
l DriveLetter：驱动器字母。
l DriveType：驱动器类型，取值为：removable（移动介质）、fixed（固定介质）、network（网络资源）、CD-ROM或者RAM盘。
l SerialNumber：驱动器的系列码。
l FileSystem：所在驱动器的文件系统类型，取值为FAT、FAT32和NTFS。
l IsReady：驱动器是否可用。
l ShareName：共享名称。
l VolumeName：卷标名称。
l Path和RootFolder：驱动器的路径或者根目录名称。
（二）Drive对象操作例程
下面的例程显示驱动器C的卷标、总容量和可用空间等信息：
var fso, drv, s ="";
fso = new ActiveXObject("Scripting.FileSystemObject");
drv = fso.GetDrive(fso.GetDriveName("c:\"));
s += "Drive C:" + " - ";
s += drv.VolumeName + " ";
s += "Total Space: " + drv.TotalSize / 1024;
s += " Kb" + " ";
s += "Free Space: " + drv.FreeSpace / 1024;
s += " Kb" + " ";
alert(s);
执行后出现下面的信息框：
四、操作文件夹（Folders）
涉及到文件夹的操作包括创建、移动、删除以及获取相关属性。
（一） Folder对象的相关属性和方法列表
（二）Folder对象操作例程
下面的例程将练习获取父文件夹名称、创建文件夹、删除文件夹、判断是否为根目录等操作：
var fso, fldr, s = "";
// 创建FileSystemObject对象实例
fso = new ActiveXObject("Scripting.FileSystemObject");
// 获取Drive 对象
fldr = fso.GetFolder("c:\");
// 显示父目录名称
alert("Parent folder name is: " + fldr + " ");
// 显示所在drive名称
alert("Contained on drive " + fldr.Drive + " ");
// 判断是否为根目录
if (fldr.IsRootFolder)
alert("This is the root folder.");
else
alert("This folder isn\'t a root folder.");
alert(" ");
// 创建新文件夹
fso.CreateFolder ("C:\Bogus");
alert("Created folder C:\Bogus" + " ");
// 显示文件夹基础名称，不包含路径名
alert("Basename = " + fso.GetBaseName("c:\bogus") + " ");
// 删除创建的文件夹
fso.DeleteFolder ("C:\Bogus");
alert("Deleted folder C:\Bogus" + " ");
五、操作文件（Files）
对文件进行的操作要比以上介绍的驱动器（Drive）和文件夹（Folder）操作复杂些，基本上分为以下两个类别：对文件的创建、拷贝、移动、删除操作和对文件内容的创建、添加、删除和读取操作。下面分别详细介绍。
（一）创建文件
一共有3种方法可用于创建一个空文本文件，这种文件有时候也叫做文本流（text stream）。
第一种是使用CreateTextFile方法。代码如下：
var fso, f1;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.CreateTextFile("c:\testfile.txt", true);
第二种是使用OpenTextFile方法，并添加上ForWriting属性，ForWriting的值为2。代码如下：
var fso, ts;
var ForWriting= 2;
fso = new ActiveXObject("Scripting.FileSystemObject");
ts = fso.OpenTextFile("c:\test.txt", ForWriting, true);
第三种是使用OpenAsTextStream方法，同样要设置好ForWriting属性。代码如下：
var fso, f1, ts;
var ForWriting = 2;
fso = new ActiveXObject("Scripting.FileSystemObject");
fso.CreateTextFile ("c:\test1.txt");
f1 = fso.GetFile("c:\test1.txt");
ts = f1.OpenAsTextStream(ForWriting, true);
（二）添加数据到文件
当文件被创建后，一般要按照“打开文件－>填写数据－>关闭文件”的步骤实现添加数据到文件的目的。
打开文件可使用FileSystemObject对象的OpenTextFile方法，或者使用File对象的OpenAsTextStream方法。
填写数据要使用到TextStream对象的Write、WriteLine或者WriteBlankLines方法。在同是实现写入数据的功能下，这3
者的区别在于：Write方法不在写入数据末尾添加新换行符，WriteLine方法要在最后添加一个新换行符，而WriteBlankLines则增加
一个或者多个空行。
关闭文件可使用TextStream对象的Close方法。
（三）创建文件及添加数据例程
下面的代码将创建文件、添加数据、关闭文件几个步骤结合起来进行应用：
var fso, tf;
fso = new ActiveXObject("Scripting.FileSystemObject");
// 创建新文件
tf = fso.CreateTextFile("c:\testfile.txt", true);
// 填写数据，并增加换行符
tf.WriteLine("Testing 1, 2, 3.") ;
// 增加3个空行
tf.WriteBlankLines(3) ;
// 填写一行，不带换行符
tf.Write ("This is a test.");
// 关闭文件
tf.Close();
（四）读取文件内容
从文本文件中读取数据要使用TextStream对象的Read、ReadLine或ReadAll
方法。Read方法用于读取文件中指定数量的字符；ReadLine方法读取一整行，但不包括换行符；ReadAll方法则读取文本文件的整个内容。读取
的内容存放于字符串变量中，用于显示、分析。在使用Read或ReadLine方法读取文件内容时，如果要跳过一些部分，就要用到Skip或
SkipLine方法。
下面的代码演示打开文件、填写数据，然后读取数据：
var fso, f1, ts, s;
var ForReading = 1;
fso = new ActiveXObject("Scripting.FileSystemObject");
// 创建文件
f1 = fso.CreateTextFile("c:\testfile.txt", true);
// 填写一行数据
f1.WriteLine("Hello World");
f1.WriteBlankLines(1);
// 关闭文件
f1.Close();
// 打开文件
ts = fso.OpenTextFile("c:\testfile.txt", ForReading);
// 读取文件一行内容到字符串
s = ts.ReadLine();
// 显示字符串信息
alert("File contents = \'" + s + "\'");
// 关闭文件
ts.Close();
（五）移动、拷贝和删除文件
对于以上三种文件操作，Javascript各有两种对应的方法：File.Move 或
FileSystemObject.MoveFile用于移动文件；File.Copy 或
FileSystemObject.CopyFile用于拷贝文件；File.Delete 或
FileSystemObject.DeleteFile用于删除文件。
下面的代码演示在驱动器C的根目录下创建一个文本文件，填写一些内容，然后将文件移动到 mp目录下，再在目录 emp下面建立一个文件拷贝，最后删除这两个目录的文件：
var fso, f1, f2, s;
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fso.CreateTextFile("c:\testfile.txt", true);
// 写一行
f1.Write("This is a test.");
// 关闭文件
f1.Close();
// 获取C:根目录下的文件句柄
f2 = fso.GetFile("c:\testfile.txt");
// 移动文件到 mp目录下
f2.Move ("c:\tmp\testfile.txt");
// 拷贝文件到 emp目录下
f2.Copy ("c:\temp\testfile.txt");
// 获取文件句柄
f2 = fso.GetFile("c:\tmp\testfile.txt");
f3 = fso.GetFile("c:\temp\testfile.txt");
// 删除文件
f2.Delete();
f3.Delete();
六、结 语
通过以上对FileSystemObject的各种对象、属性和方法的介绍和示例，相信你已经对如何使用JavaScript语言在页面中操作驱动器、文
件和文件夹有了清晰的认识。但是上述提及的例程都非常简单，要全面、灵活地掌握JavaScript文件操作技术，还需要大量的实践练习。而且还有一点提
醒大家，由于涉及到在浏览器中进行文件读写这样的高级操作，对于默认的浏览器安全级别而言，在代码运行前都会有一个信息提示，这点请在实际环境中提示访问
者注意。
Top
<script language="JavaScript">
<!--
function ReadTxt(file,oTxt){
var path=file.value
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(path, 1);
oTxt.value=f.ReadAll();
}
//-->
</script>
<form>
<input type="file" name="file1"><input type=button onclick="ReadTxt(file1,txt)" value="Read">
<textarea name="txt"></textarea>
</form>
近期在全身心做毕业设计，我需要做的项目类似于迷宫搜索，为了显示算法运行时的效果，采用了javascript来写（使用canvas来画图）。
其中一个功能是把js代码随机生成的迷宫保存到本地文件中，方便下次读取。一般来说，由于安全因素，javascript写文件到操作系统文件中是不推荐的，不还还是搜索到了一些方法，这里总结一下：
【方法一】localStorage
localStorage是按照键值对的方式读取
存储时：localStorage[key] = value;
读取时：value=localStorage[key];
保存后，即使页面关闭，下次打开页面也可以直接读取；缺点是并非保存文件，无法直接访问。
Ref: http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
http://blog.csdn.net/dojotoolkit/article/details/6614883
【方法二】execCommand(“saveas”)
这种方法用来保存文件的代码详见：http://4umi.com/web/javascript/filewrite.php
其html部分是：
- <form action="#" onsubmit="return savefile(this);">
- <textarea name="txt" title=" Text edit area - Alt+Z " accesskey="z" rows="10" cols="80">123</textarea>
- <div>
- <input title=" Save - Alt+S " class="key" accesskey="s" type="submit" value=" Save ">
- <label title=" Filename - Alt+A " for="filename">As</label>
- <input name="filename" class="it" id="filename" accesskey="a" type="text" size="40" value="D:\MazeSet\1">
- <select name="ext" title=" Extension ">
- <option value="iso-8859-1">.html</option>
- <option selected="selected" value="utf-8">.txt</option>
- </select>
- <input title=" Remove null bytes - Alt+U " class="key" accesskey="u" onclick="this.form.elements.txt.value = unnull( this.form.elements.txt.value );" type="button" value=" Unnull ">
- <input title=" Reset the form to its initial state - Alt+R " class="key" accesskey="r" type="reset" value=" Reset ">
- </div>
- </form>
其缺点是浏览器的支持不好，我用的IE11(偶有更新强迫症)可以运行(启用ActiveXObject)，Chrome不行，可见Chrome安全性更高.
execCommand()还有很多其他用法,Ref: http://www.jsann.com/post/JS_execCommand_method.html
【方法三】File API
File API是html5新标准，既可以读文件，也可以写文件，注意这里的
读文件：OS中文件系统中的文件 读到 浏览器页面 中
写文件：将 浏览器页面数据 写到 浏览器文件系统 中
参见博客：http://www.html5rocks.com/en/tutorials/file/dndfiles/
其中讲解很详细，不过读文件时用的是读图片。这里贴一份读文本的代码
- <html>
- <head>
- <script type="text/javascript" src="ReadTest.js">
- var a=new Array();
- function handleFileSelect(evt) {
- var files = evt.target.files; // FileList object
- if(files[0])
- {
- var reader = new FileReader();
- reader.readAsText(files[0]);
- reader.onload = loaded;
- }
- }
- function loaded(evt) {
- var fileString = evt.target.result;
- alert(fileString);
- }
- </script>
- </head>
- <body>
- <input type="file" id="file" name="files[]" multiple />
- <script type="text/javascript">
- var btn=document.getElementById(\'file\');
- btn.addEventListener(\'change\', handleFileSelect, false);
- </script>
- </body>
- </html>
读文件用到FileReader接口，写文件使用FileWriter，写文件是要将 页面数据 写入到 浏览器的文件系统(root) 中，而我需要的是保存到 OS的文件系统中，所以采用另一种方法：先用BlobBuilder把要写入的数据合成Blob，创建表示Blob的URL，再根据不同浏览器选择保存策 略，实际就是下载文件
JS文件:
- function doSave(value, type, name) {
- var blob;
- if (typeof window.Blob == "function") {
- blob = new Blob([value], {type: type});
- } else {
- var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
- var bb = new BlobBuilder();
- bb.append(value);
- blob = bb.getBlob(type);
- }
- var URL = window.URL || window.webkitURL;
- var bloburl = URL.createObjectURL(blob);
- var anchor = document.createElement("a");
- if (\'download\' in anchor) {
- anchor.style.visibility = "hidden";
- anchor.href = bloburl;
- anchor.download = name;
- document.body.appendChild(anchor);
- var evt = document.createEvent("MouseEvents");
- evt.initEvent("click", true, true);
- anchor.dispatchEvent(evt);
- document.body.removeChild(anchor);
- } else if (navigator.msSaveBlob) {
- navigator.msSaveBlob(blob, name);
- } else {
- location.href = bloburl;
- }
- }
- var a=new Array();
- for(var i=0;i<10;i++)
- a.push(i);
- function Save(){
- doSave(a, "text/latex", "hello.txt");
- }
HTML文件:
- <!DOCTYPE html>
- <html>
- <head>
- <script type=\'text/javascript\' src="SaveBlob.js"/>
- </head>
- <body>
- <input type="button" id="savetext" value="Save" onclick="Save()"/></div>
- </body>
- </html>
代码参考: http://www.cnblogs.com/zoho/archive/2012/05/27/2520468.html
File API 这种方法，IE和Chrome皆可行。
Ref: http://www.w3.org/TR/FileAPI/