js通过FileReader将本地图片转成base64位

  我们的项目中，经常会有上传文件或者图片之类的功能，这次专门看看上传图片的功能吧，可能刚好项目中碰到的功能比较简单不需要做自定义尺寸裁剪的功能，我们希望能在上传图片到服务器之前实现图片预览，那么中间就可以使用一个JS(Es6)的新对象FileReader,通过它我们可以将本地input file选择的图片转换成base64图形编码。

Html dom：

< input type="file" id="inputId" />
< img id="imgId" alt="" />

Javacript代码：

document.getElementById('inputId').onchange = function() {
    var file = this.files[0];
    var a = new FileReader();
    a.onload = function (e) {
        //加载成功后，获取base64
        var base64 = e.target.result;
        //将base64赋给图片的src
        document.getElementById('imgId').src = base64;
    }
    a.onerror = function(){
        console.log("读取图片错误");
    }
    a.readAsDataURL(file);
}

预览：

IE支持情况：