html5 预览本地图片

方法一：window.URL.createObjectURL 方法

• window.URL.createObjectURL 方法存入一个 input[type=file]返回的File对象，返回一个存在内存中的url，同域的img标签可以访问到该url;

• 在关闭页面时，浏览器会自动释放图片地址中的内存，但同一页面多次调用
  会造成内存占用过多，可以主动调用window.URL.revokeObjectURL(url1)释放图片资源，释放后通过src请求图片会返回404；

• 该方法不只是允许访问图片，也可以访问到任何文件，只是其他类型文件无法预览；

方法二：FileReader 类

• FileReader的readAsDataURL方法将文件以base64格式读出到页面中，如果文件太大，过程是耗费时间的，可以通过reader.onprogress事件监听读取过程；
• 如果仅仅为了预览图片而把整个文件读取到页面中，是挺浪费时间和资源的，所以FileReader主要是用于你想在页面中加工图片或文件时使用的；
• FileReader类还有很多方法和事件，足以另开一篇博文，关于FileReader的详细讨论可以自己 Google；