如何预览要上传的图片？

Q：上传图片时，如何实现图片预览？

A：昨天我们讨论了如何借助FormData通过Ajax上传文件。有同学留言谈到上传图片文件时，有时需要进行图片预览，这样能及时发现选择的图片文件是否正确，但是，不知道如何实现？

## 图片上传前预览真的那么重要吗？

$$ 哈哈，有些喜欢私藏图片的同学万一上传错了，那可真要出大事了！

## 嗯~，看来还真是蛮重要的。

OK，那我们今天就来介绍一下图片上传前如何实现预览功能。说实话，早起的网页和浏览器貌似还真不好解决这个问题，但是，自从HTML5以后，图片、音频、视频等对象都有了很好的解决方案。

为此，我需要用到 JanaScript 的FileReader()类（对象）。

FileReader()对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。以下代码创建了一个 FileReader 的实例：

var myReader = new FileReader();

FileReader 包含4个用于读取文件的选项：

FileReader.readAsBinaryString(Blob | File)：result属性将包含二进制字符串的 file/blob 的数据。每个字节由[0...255]范围内的整数表示。

FileReader.readAsText(Blob | File，opt_encoding)：result属性将包含文本字符串的 file/blob 的数据。默认情况下，字符串被解码为"UTF-8"。使用可选的encoding参数可以指定不同的格式。

FileReader.readAsDataURL(Blob | File)：result属性将包含编码为 data URL 的 file/blob 的数据。

FileReader.readAsArrayBuffer(Blob | File)：result属性将包含作为 ArrayBuffer 对象的 file/blob 的数据。

这里，我们就是使用FileReader的FileReader.readAsDataURL(File)方法来实现图片预览的。

需要注意的是，Internet Explorer 10和11+，Mozilla FireFox，Google Chrome和Opera等浏览器都支持HTML5，都可以使用HTML5 FileReader API来显示图像预览。

下面我们提供一个应用案例：

（HTML页面选择要上传的图片文件）

（JS中使用FileReader实现图片预览代码）