以前在写asp的后台的时候，有一个上传功能是必须的，那时候进行的图片预览（未上传前）其实就是获取本地的图片路径来显示图片，但是随着HTML5的出现，可以把图片通过编码来实现预览。
在雅虎的36条速度优化里面其中有一条就是减少HTTP请求数，而内联图像是使用 data:URL scheme的方法把图像数据加载页面中，从而达到减少请求数的目的。这可能会增加页面的大 小。把内联图像放到样式表（可缓存）中可以减少 HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的 支持。
所以对于一些icon或者小背景，可以通过Base64图片转换工具来把图片编码，下面要带来就是这个工具的实现细节：
实现技术：HTML5里面的本地预览（FileReader）
FileReader提供的具体方法
readAsBinaryString(file) //将文件读取二进制码 通常我们将它传送到后端，后端可以通过这段字符串存储文件
readAsText(file,[encoding]) //将文件读取文本 第二个参数是文本的编码方式，默认UTF-8
readAsDataURL(file) //将文件读取为DataURL 将文件读取为一串Data URL字符串，将小文件以一种特殊格式的URL地址直接读入页面。小文件
//指图像与html等格式的文件。
FileReader提供的事件
onabort //数据读取中断时触发
onerror //数据读取出错时触发
onloadstart //数据读取开始时触发
onprocess //数据读取中
onload //数据读取成功完成时触发
onloadend //数据读取完成时触发，无论成功失败
调用FileReader的readAsDataURL接口，将启动异步加载文件内容，通过给reader监听一个onload事件，将数据加载完毕后，在onload事件处理中，通过reader的result属性即可获得文件内容
核心代码
var file = this.files[0], //上传的文件
r = new FileReader();
r.readAsDataURL(file); //转换成Base64
r.onload = function(){
console.log(r.result); //得到具体的Base64
}