上传图片本地预览效果实现（兼容IE8）

最近项目里须要用到上传图片并预览的功能，因而写了个jQuery预览图片插件，下载地址。若是有须要的，能够直接下载。第一次写jQuery插件，若有不对之处，欢迎你们指正。下面是一些相关的知识点。

HTML5 File API

在HTML5 File API出现前，前端对于文件的操做的很是有局限性的。出于安全角度考虑，从本地上传文件时，代码是不可能获取文件在用户本地的地址。可是File API的出现，实现了这一功能。File API主要有如下几个接口：

1. Blob

2. File

3. FileList

4. FileReader

FileList API

当经过file控件获取文件后，能够经过该控件的files属性获得FileList对象。FileList对象里保存着选择的文件，即File对象。在MDN里有以下提示：

在Gecko 1.9.2以前,经过input元素,每次只能选择一个文件,这意味着该input元素的file
s属性上的FileList对象只能包含一个文件.从Gecko
1.9.2开始,若是一个input元素拥有multiple属性,则能够用它来选择多个文件.

所以须要注意，在默认状态下选择文件，每次FileList对象里只有一个File文件。
以上传图片为例。File对象保存了“name”,"size","type"等图片的信息。

<input id="fileItem" type="file">
var file = document.getElementById('fileItem').files[0];

FileReader API实现本地图片预览

FileReader用来异步读取本地文件
FileReader对象容许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。咱们能够经过FileList获取上传的图片相关信息，可是想要实现本地预览还须要借助FileReader来实现,FileReader能够读取本地图片，并将图片数据转换成base64编码的字符串形式嵌入到页面中。

//建立一个FileReader对象
var reader = new FileReader();
//读取file文件；
reader.readAsDataURL(file);

FileReader提供了几个方法，如readAsText(),readAsDataURL(),readAsArrayBuffer()，分别表示用不一样的数据格式来读取上传的文件，并将结果保存在result属性里。
在读取本地文件的过程当中，FileReader提供了一些事件可供监听。如onprogress,onload,onerror,onabort等。在上传图片的过程当中，经常使用到的有onprogress事件在读取数据过程当中周期性调用，能够用来实现上传进度条效果，onload事件，当读取操做成功完成时调用。在咱们实现上传图片的效果里，就有用到。

//当文件读取成功后，将结果保存到url变量里；
reader.onload = function(evt) {
    var url = evt.target.result;
}

最后，将该url赋值给img元素的src属性，即可以实现本地图片预览了。
关于兼容性，不兼容IE9及如下浏览器，其它主流浏览器通常都没有问题。

HTML5 URL API

URL对象用于生成指向File对象或者Blob对象的URL。使用URL的好处是能够没必要把文件内容读取到JavaScript中而能够直接使用文件内容。若是经过URL对象来实现本地预览，那么只需将生成的File对象的URL传递给img元素的src属性便可。

当使用一个没有实现该构造器的用户代理时，能够经过 Window.URL
属性来访问该对象（基于 Webkit 和 Blink 内核的浏览器都可用 Window.webkitURL
代替）。

var url = window.URL || window.webkitURL;

createObjectURL()实现本地图片预览

URL对象有两个方法，分别是createObjectURL()和revokeObjectURL()。

1. createObjectURL()的做用
   生成文件File对象或者Blob对象的URL对象，经过这个URL，能够访问到URL所指向文件的整个内容。

var src = url.createObjectURL(file);

在每次调用createObjectURL()方法的时候,都会建立一个新的对象URL,即便你已经用相同的对象做为参数建立过。在你不须要这些对象URL的时候,你应该经过调用 window.URL.revokeObjectURL()方法来释放它们所占用的内容。

1. revokeOjectURL()的用法

url.revokeObjectURL(src);

参数src是上述咱们经过createObjectURL建立的URL对象。
关于兼容性，不兼容IE9及如下浏览器，其它主流浏览器通常都没有问题。在MDN里提到，这是一个实验中的功能。

图片预览兼容IE处理

IE9及如下版本不支持File API和URL API。所以须要作兼容处理。
在这里，咱们须要用到document.selection。document.selection只有IE支持。表明了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操做的其它元素。selection 对象的典型用途是做为用户的输入，以便识别正在对文档的哪一部分正在处理，或者做为某一操做的结果输出给用户。
在用document.selection前，咱们须要先建立选中区。如鼠标选中文本框，便是一个选中区。也能够经过js提供的select()方法建立一个选中区。建立了选中区后，咱们就能够经过document.selection获取该选中区。若是要对选中区执行操做，则须要先调用createRange()方法。

//获取上传文件控件的值；
file.select();
var url = document.selection.createRange().text;

现有的获取IE低版本上传文件的value值通常都是这种方式，在IE中本来能够直接经过input的value值来获取上传图片的路径，可是在实际中不多看到使用。具体的你们能够去查查资料。
非IE6版本的IE因为安全问题直接设置img的src没法显示本地图片，可是能够经过滤镜来实现。

pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";

到这里，图片本地预览基本就完成了。