javascriptw文件操作（全套）

亦凉 2022-08-21 12:54 6阅读 0赞

# JavaScript中读取和保存文件实例 #

作者： 字体：\[增加 减小\] 类型：转载 时间：2014-05-08[ 我要评论][Link 1]

这篇文章主要介绍了JavaScript中读取和保存文件实例,使用HTML5 File API实现,需要的朋友可以参考下

话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。  
  
因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来，其他浏览器也纷纷支持了。

首先说读取文件。W3C提供了一些File API，其中最重要的是FileReader这个类。

先列出需要用到的HTML标签：

复制代码代码如下:

当选择了一个文件时，就会把包含这个文件的列表（一个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：当文件读取时，周期性地触发

有了这些方法以后，就可以处理文件了。  
先来试试读取文本文件：

复制代码代码如下:

这里的this.result实际上就是reader.result，也就是读取出来的文件内容。  
测试一下你会发现这个文件的内容被添加到网页中了。如果是用Chrome的话，必须把网页放在服务器上或插件里，file协议下会失败。

再来试试图片，因为浏览器可以直接显示Data URI协议的图片，所以这次就添加图片：

复制代码代码如下:

其实input:file控件还支持选择多个文件：

复制代码代码如下:

这样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》。

接下来说保存文件。  
实际上File API: Writer提供了4个接口，但目前只有部分浏览器（Chrome 8+和Firefox 4+）实现了BlobBuilder，其余接口都不可用。  
对于不支持的浏览器，可以使用BlobBuilder.js和FileSaver.js来获得支持。  
我研究了一下，发现了其中的奥秘。

BlobBuilder可以创建一个Blob对象。把这个Blob对象传递给URL.createObjectURL()方法，就可以拿到一个object URL。而这个object URL就是这个Blob对象的下载地址。  
拿到下载地址后，创建一个a元素，将下载地址赋值给href属性，文件名赋值给download属性（Chrome 14+支持）。  
然后再创建一个click事件，交给这个a元素处理，就会导致浏览器开始下载这个Blob对象了。  
最后，用URL.revokeObjectURL()来释放这个object URL，通知浏览器可以不必继续引用这个文件了。

下面就是一段化简的代码：

复制代码代码如下:

var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;  
var URL = URL || webkitURL || window;

function saveAs(blob, filename) \{  
    var type = blob.type;  
    var force\_saveable\_type = 'application/octet-stream';  
    if (type && type != force\_saveable\_type) \{ // 强制下载，而非在浏览器中打开  
        var slice = blob.slice || blob.webkitSlice || blob.mozSlice;  
        blob = slice.call(blob, 0, blob.size, force\_saveable\_type);  
    \}

var url = URL.createObjectURL(blob);  
    var save\_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');  
    save\_link.href = url;  
    save\_link.download = filename;

var event = document.createEvent('MouseEvents');  
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
    save\_link.dispatchEvent(event);  
    URL.revokeObjectURL(url);  
\}

var bb = new BlobBuilder;  
bb.append('Hello, world!');  
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world.txt');

参考url:http://www.jb51.net/article/49867.htm

[Link 1]: http://www.jb51.net/article/49867.htm#comments