话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。
因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来，其他浏览器也纷纷支持了。
首先说读取文件。W3C提供了一些File API，其中最重要的是FileReader这个类。
先列出需要用到的HTML标签：
复制代码 代码如下:
<input type="file" onchange="handleFiles(this.files)"/>
当选择了一个文件时，就会把包含这个文件的列表（一个FileList对象）作为参数传给handleFiles()函数了。
这个FileList对象类似一个数组，可以知道文件的数目，而它的元素就是File对象了。
从这个File对象可以获取name、size、lastModifiedDate和type等属性。
把这个File对象传给FileReader对象的读取方法，就能读取文件了。
FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
此外，abort()方法可以停止读取文件。
FileReader对象在读取文件后，还需要进行处理。为了不阻塞当前线程，API采用了事件模型，可以注册这些事件：
1.onabort：中断时触发
2.onerror：出错时触发
3.onload：文件成功读取完毕时触发
4.onloadend：文件读取完毕时触发，无论是否失败
5.onloadstart：文件开始读取时触发
6.onprogress：当文件读取时，周期性地触发
有了这些方法以后，就可以处理文件了。
先来试试读取文本文件：
复制代码 代码如下:
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text\/\w+/.test(file.type)) {
reader.onload = function() {
$('<pre>' + this.result + '</pre>').appendTo('body');
}
reader.readAsText(file);
}
}
}
这里的this.result实际上就是reader.result，也就是读取出来的文件内容。
测试一下你会发现这个文件的内容被添加到网页中了。如果是用Chrome的话，必须把网页放在服务器上或插件里，file协议下会失败。
再来试试图片，因为浏览器可以直接显示Data URI协议的图片，所以这次就添加图片：
复制代码 代码如下:
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text\/\w+/.test(file.type)) {
reader.onload = function() {
$('<pre>' + this.result + '</pre>').appendTo('body');
}
reader.readAsText(file);
} else if(/image\/\w+/.test(file.type)) {
reader.onload = function() {
$('<img src="' + this.result + '"/>').appendTo('body');
}
reader.readAsDataURL(file);
}
}
}
其实input:file控件还支持选择多个文件：
复制代码 代码如下:
<input type="file" multiple="" onchange="handleFiles(this.files)"/>
这样handleFiles()里就需要遍历处理files了。
如果只想读取部分数据的话，File对象还有webkitSlice()或mozSlice()方法，用于生成Blob对象。这个对象可以和File对象一样被FileReader读取。这2个方法接收3个参数：第1个参数是起始位置；第2个是结束位置，省略时则读到文件结尾；第3个是content type。
例子可以参考《Reading local files in JavaScript》。
当然，除了导入数据和显示文件以外，它还可以用来做AJAX上传，代码可以参考《Using files from web applications》。