JavaScript浏览器访问/上传本地文件

这两天着手进行数据的可视化问题，需要使用javascript进行本地文件的操作，但是使用浏览器访问本地文件一直不太方便。为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能，我们就不得不求助于特定浏览器所提供的各种技术了。比如对于 IE，我们需要通过 ActiveX 控件来获取对本地文件的访问能力，而对于 Firefox，同样也要借助插件开发。由于不同浏览器的技术实现不尽相同，为了让程序能够支持多浏览器，我们的程序就会变得十分复杂而难于维护。
经过实践尝试，下面介绍两种可行的方式：

一、使用FileSystemObject

这种方法
①创建对象

var fso = new ActiveXObject("Scripting.FileSystemObject");  

②创建文件

var f = fso.createtextfile("c:\\1.txt",true");  

该操作可以在本地磁盘上创建一个文件。
也可以使用第二种方式，代码如下：

var ForWriting= 2;  
fso = new ActiveXObject("Scripting.FileSystemObject");  
test = fso.OpenTextFile("c:\\1.txt", ForWriting, true);  

或者使用 第三种方式：

var fso, f, test;  
var ForWriting = 2;  
fso = new ActiveXObject("Scripting.FileSystemObject");  
fso.CreateTextFile ("c:\\1.txt");  
f = fso.GetFile("c:\\1.txt");  
test = f1.OpenAsTextStream(ForWriting, true);  

③获取文件句柄
上面的例子可以看出获取文件句柄是：

var f = fso.GetFile("c:\\1.txt");  

④写文件
写文件的方法有Write、Writeline等
代码如下：

var fso, test;  
fso = new ActiveXObject("Scripting.FileSystemObject");  
// 创建新文件  
test = fso.CreateTextFile("c:\\1.txt", true);  
// 填写数据，并增加换行符  
test.WriteLine("1,2,3,4") ;   
// 填写一行，不带换行符  
test.Write ("hello world");  

⑤关闭文件
和java一样，调用close（）方法

f.close

二、使用javascript 的API

事实上，这种方式由于不使用activx插件，因而使用起来更加方便。
File API 是 Mozilla 向 W3C 提交的一个草案，旨在推出一套标准的 JavaScript API，其基本功能是实现用 JavaScript 对本地文件进行操作。出于安全性的考虑，该 API 只对本地文件提供有限的访问。有了它，我们就可以很轻松的用纯 JavaScript 来实现本地文件的读取和上传了。目前，FireFox 3.6 是最先支持这一功能的浏览器。除此以外，最新版本的 Google Chrome 浏览器和 Safari 浏览器也有相应的支持。File API 有望成为 W3C 目前正在制定的未来 HTML 5 规范当中的一部分。
①常用方法

readAsBinaryString()     
读取文件内容，读取结果为一个 binary string。文件每一个 byte 会被表示为一个 [0..255] 区间内的整数。函数接受一个 File 对象作为参数。
readAsText()     
读取文件内容，读取结果为一串代表文件内容的文本。函数接受一个 File 对象以及文本编码名称作为参数。
readAsDataURL    读取文件内容，读取结果为一个 data: 的 URL。

②常用事件
以下是文件操作的常用事件列表：

Onloadstart  文件读取开始时触发。
Progress     当读取进行中时定时触发。事件参数中会含有已读取总数据量。
Abort    当读取被中止时触发。
Error    当读取出错时触发。
Load     当读取成功完成时触发。
Loadend  当读取完成时，无论成功或者失败都会触发。

三、实践

我最终选用了第二种方式进行文件操作，部分文件相关代码可以贴出来：
①html相关代码：

 <form name="demoForm" action="javascript: getData();">
            <input type="file" name="fileOld" />
            <input type="file" name="fileNew" />
            <input type="submit" value="显示">

注意要将文件的操作放入form里面。

②javascript相关代码

var form, fileOld, fileNew, readerOld, readerNew, chart;
    function getData() {
        form = document.forms["demoForm"];

        fileNew = form["fileNew"].files[0];
        readerNew = new FileReader();
        readerNew.onloadend = function() {
            var text = readerNew.result;
            var textArray = text.split(",");
            var data = [];
            for (var i in textArray) {
                if (!textArray[i]) continue;
                data.push(parseFloat(textArray[i]));
            }
            options.series[1].data = data;
        }