html5提供来的关于文件访问的接口，也就是说我们能够通过html5的api（FileReader）来进行文件的访问，我们能够读取文件的内容。
###基本的使用
if(!window.FileReader) { console.log('你的浏览器不支持FileReader') } var $file =document.getElementById('myFile'); var fileReader = new FileReader(); $file.addEventListener('change', function(e) { var files = e.target.files; if(files && files.length) { var file = files[0]; fileReader.readAsText(file); } }); fileReader.onerror = function(e) { console.log('文件读取失败!'); } fileReader.onload =function() { var $result =document.getElementById('result'); var result = this.result; $result.innerText = result; }
上面是一个简单的FileReader的使用的一个例子，首先在我们使用FileReader之前，先要判断浏览器是否支持FileReader，然后再进行操作。
###FileReader接口提供的方法， FileReader为我们提供了四个方法，其中有三个方法使用来进行文件的读取的，有一个方式是用来中断我们的文件读取的。
-
readAsBinaryString(file) : 将文件读取为二进制编码,
-
readAsText(file,[encoding]) : 将文件读取为文本,
-
readAsDataURL(file) : 将文件读取为DataURL,
-
abort(none) : 中断读取操作.
FileReader接口提供的事件
FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
-
onabort : 中断,
-
onerror : 出错,
-
onloadstart : 开始,
-
onprogress : 正在读取,
-
onload : 读取成功,
-
onloadend : 读取完成，无论成功失败(无论成功失败)。
在我们上面的例子中我们使用了onerror以及onload这两个事件，在onload中我们通过使用this.result来获取读取的内容。
if(!window.FileReader) { console.log('你的浏览器不支持FileReader') } var $imgFile = document.getElementById('imgFile'); var $binaryFile = document.getElementById('binaryFile'); var $textFile = document.getElementById('textFile'); var fileReader = new FileReader(); $imgFile.addEventListener('change', function(e) { var files = e.target.files; if(files && files.length) { var file = files[0]; fileReader.readAsDataURL(file); } }) $binaryFile.addEventListener('change', function(e) { var files = e.target.files; if(files && files.length) { var file = files[0]; fileReader.readAsBinaryString(file); } }); $textFile.addEventListener('change', function(e) { var files = e.target.files; if(files && files.length) { var file = files[0]; fileReader.readAsText(file); } }) fileReader.onerror = function(e) { console.log('文件读取失败!'); } fileReader.onload =function() { var $result =document.getElementById('result'); var result = this.result; $result.innerText = result; }// html代码