16.6 预览上传的图片
在HTML 5中，通过FileReader接口不仅可以读取图片文件，还可以读取文本或二进制文件，并且能够根据该接口提供的事件与方法动态侦察文件读取时的详细状态。接口FileReader为用户提供了一个异步API，通过这个API可以从浏览器主线程中异步访问文件系统中的数据。正是因为如此，FileReader接口可以读取文件中的数据，并将读取的数据放入内存中。当访问不同文件时，必须重新调用FileReader接口的构造函数。因为每调用一次，接口FileReader都将返回一个新的FileReader对象，只有这样才能实现访问不同文件的数据。在接口FileReader中有许多用于读取文件或响应事件的方法，例如触发onabort事件时需要调用abort（）方法。接口FileReader中的常用方法的说明如表16-1所示。
表16-1 接口FileReader中的常用方法
在本实例中，使用fileReader接口中的方法readAsDataURL（）获取API异步读取的文件数据，然后另存为数据URL格式，并将该URL绑定<img>元素的“src”属性值，这样就可以实现图片文件预览的效果。实例文件6.html的实现代码如下。
在上述代码中，在页面表单中先添加了一个“file”类型的<input>元素用于选择上传文件，设置属性“multiple”的值为“true”，这表示允许选择多个文件。单击“选择文件”按钮后，如果选择的是图片文件则在页面中显示。
在本实例中，图片预览的过程实质上是图片文件被读取后展示在页面中的过程。为了实现这一过程，需要引用FileReader接口提供的读取文件方法readAsDataURL（）。在引用接口前，考虑到各浏览器对接口的兼容性不一样，首先利用JavaScript代码检测用户的浏览器是否支持FileReader对象，如果不支持则提示出错信息。JavaScript文件js6.js的主要代码如下。
在上述JavaScript代码中，通过遍历传回上传文件集合的方式获取了每个“file”对象。因为每个文件返回的数据块都不同，所以每次在读取文件前必须先重构一个新的FileReader对象，然后将每个文件以数据URL的方式读入页面中。当读取成功时触发onload事件，在该事件中通过属性“result”获取文件读入页面中的URL地址，并将该地址与<img>元素进行绑定。最后通过列表ID号为<ulUpload>的列表元素展示在页面中，从而实现上传图片文件预览的效果。执行效果如图16-8所示。
图16-8 执行效果