Input file 预览图片

目前是一个小白，刚刚实习，发现需要用到input file 上传以后需要预览 所以去网上找了一下，记录一下，以备不时之需。

这个功能可以通过HTML5 的FileReader()方法来实现。

FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest，区别只是它读取的是文件系统，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法。

readAsText(file,encoding)：以纯文本的方式读取文件，将读取到的文件保存到result属性中。

readAsDataURL(file)：读取文件并将文件以数据URI的形式保存在result属性中。

readAsBinaryString(file)：读取文件并将一个字符串保存在result属性中，字符串中的每个字符表示一个字节。

readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

通过readAsDataURL(file)方法，我们就可以将读取到的图片数据以URI的方式显示在页面中。

首先 我们先看一下 上传之前 预览单张的Html部分

Html部分

在看一下jQuery部分

jQuery部分

运行结果：

运行结果

我们在记录一下关于多张预览

HTML部分：

HTML部分

jQuery部分：

jQuery部分

运行结果：

运行结果

我个人不喜欢input file后面的地址 所以一般用 “color: transparent” 

运行结果：

这样看着舒服多了

HTML5 FileReader 可以在 Internet Explorer 10+、FireFox,、Chrome 和Opera浏览器中正常工作。