html5-FileReader实现上传图片实时预览

普通的文件上传只能看到它的文件名，而如果要实现选择某一张图片则可以利用html5的FileReader完成

下面是实现步骤：
html:

这里是上传图片的内容，οnchange="getFile()"为选择文件后的转换函数，后面会提及
上传图片的按钮我这里是自定义的，做法在另一篇博客里

css:

预览框我暂定为100x100的正方形框，出来后图片可能会有变形之类的，可以自定义

接下来是主要的JS部分
JS：

首先，定义一个变量showFile保存实际要显示的图片的整个文件
获取预览框，方便之后的显示：
准备工作做完了，现在开始转码
编写一个函数，将图片路径转码
这样就获取到了转码后的图片文件的src（注意：FileReader在IE里是不兼容的，IE 6-9完全不兼容，IE 10-11需要写兼容）
接下来就是转换啦
这里将选择的文件获取到之后，再赋给全局文件（如果点开了选择框但是没有选择文件即为之前的文件本身），再回调函数里将src赋给预览框
这一步的完成时间是在file框的onchange中完成的
然后效果就完成啦，看看成果吧
选择之前：