在我的前一篇blog中，我介绍了在javascript中如何使用文件，具体重点放在如何获得file对象。只有当用户通过上传或者拖拽的方式上传了文件，这些对象才拥有文件的元数据。一旦你有了这些文件，下一步就是从这些文件中读取数据。
filereader 类型filereader类型有一个单一的工作，就是从一个文件中读取数据并存储在一个javascript变量中。它的api有意设计得与xmlhttprequest相同，因为它们都是从一个外部资源（浏览器之外）加载数据。读操作是异步的，这样不会使浏览器堵塞。
filereader可以创建多种格式来表示文件的数据，而当读取文件时返回的格式是必须的。读取操作是通过调用下面任一方法来完成的：
readastext() – 使用纯文本的形式返回文件内容
readasbinarystring() – 使用加密二进制数据字符串的形式来返回文件内容（该方法已废弃，请使用readasarraybuffer()代替）
readasarraybuffer() – 使用arraybuffer的形式来返回文件内容（对二进制数据比如图像文件有用）
readasdataurl() – 使用数据url的形式返回文件内容
像xhr对象的send方法会发起一个http请求一样，上面的每个方法都会启动一个文件读取。就这一点来说，在开始读取之前，你必须监听load事件，event.target.result总是返回读取的结果。例如：
var reader = new filereader(); reader.onload = function(event) { var contents = event.target.result; console.log("file contents: " + contents); }; reader.onerror = function(event) { console.error("file could not be read! code " + event.target.error.code); }; reader.readastext(file);
在这个例子中，我们简单地读取文件内容，并将内容以纯文本的形式输出到console。当文件被成功读取时会调用onload操作，而因为某些原因无法读取时会调用onerror操作。在事件处理器中可以通过event.target来获得filereader实例，而且它推荐这样使用，而不是直接使用reader变量。result属性包含读取成功时的文件内容和读取失败时的错误信息。
读取数据uri你可以用差不多的方法来将文件读取为一个数据uri，数据的uri（有时也叫数据url）是个有趣的选项，比如你想要显示从磁盘上读取的图像文件，你可以用下面的代码这样做:
var reader = new filereader(); reader.onload = function(event) { var datauri = event.target.result, img = document.createelement("img"); img.src = datauri; document.body.appendchild(img); }; reader.onerror = function(event) { console.error("file could not be read! code " + event.target.error.code); }; reader.readasdataurl(file);
这段代码简单地在页面上插入一个从磁盘上读取来的图像文件。因为这个数据uri包含了图像的所有数据，所以它可以被直接传给图像的src属性，并显示在页面上。你可以交替地加载图像和将其绘制到一个<canvas>上：
var reader = new filereader(); reader.onload = function(event) { var datauri = event.target.result, context = document.getelementbyid("mycanvas").getcontext("2d"), img = new image(); // wait until the image has been fully processed img.onload = function() { context.drawimage(img, 100, 100); }; img.src = datauri; }; reader.onerror = function(event) { console.error("file could not be read! code " + event.target.error.code); }; reader.readasdataurl(file);
这段代码将图像数据加载到一个新的image对象，并将其绘制到一个画布上（宽度和长度都指定为100）。
数据uri一般用来做这个，但能用在任何类型的文件上。将文件读取为一个数据uri最普遍的用法是在web页面中快速显示文件内容。
读取arraybuffersarraybuffer类型[1]最初是作为webgl的一部分被引进的。一个arraybuffer代表一个有限的字节数，可以用来存储任意大小的数字。读取一个arraybuffer数据的方式需要一个特定的视图，比如int8array是将其中的字节处理为一个有符号的8位整数集合，而float32array是将其中的字节处理为一个32位浮点数的集合。这些称为类型数组[2]，这样可以强制你工作在一个特定的数字类型上，而不是包含任意类型的数据（像传统的数组）。
当处理二进制文件时你可以优先使用arraybuffer，这样对数据可以有更细粒度的控制。要解释关于arraybuffer的所有ins和outs已经超出本篇blog的范围，你只需要知道在你需要的时候可以很容易地将一个文件读取为一个arraybuffer就可以了。你可以直接传一个arraybuffer到一个xhr对象的send()方法，发送原始数据到服务器（你会在服务器的请求中读取这个数据去重建文件），只要你的浏览器完全支持xmlhttprequest level 2[3]（大部分最新的浏览器，包括ie10和opera12都支持）。
以上就是javascript文件处理第二部分-文件读取的示例代码分享的详细内容。