今日完成:

运用input type=“file”的标签获取图片，再使用FileReader这个对象 new 一个实例，通过这个对象的readAsDataURL()方法读取file标签获取的图片并转换为base64格式，完成之后通过ajax之类的方式传到后台。

HTML

需要一个input type="file" 的标签 如果需要预览的话可以再加一个img标签

 <input type="file" id="file" />

var file = document.getElementById('file');

var image = document.querySelector("img");

file.onchange = function() {

    var fileData = this.files[0];//获取到一个FileList对象中的第一个文件(File 对象)。这是我们上传的文件            

}

二、然后运用 FileReader 这个对象，FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。这里用到了里面的 readAsDataURL 这个方法，它能把文件用base64格式读出。

var reader = new FileReader();

reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示

/*当读取操作成功完成时调用*/

reader.onload = function(e) {

    console.log(e); //查看对象属性里面有个result属性，属性值，是一大串的base64格式的东西，这个就是我们要的图片

    console.log(this.result);//取得数据 这里的this指向FileReader（）对象的实例reader

    image.setAttribute("src", this.result)//赋值给img标签让它显示出来 

}