FileReader方法：
- readerText():读取文本文件，可以使用TXT打开的文本文件，返回的是字符串形式，默认的编码格式是utf-8.
- readAsBinaryString()：读取任意类型的文件，返回的是二进制数据，后台接受后可以存储到数据库
- readAsDataURL():读取文件获取一段以data开头的字符串。DataURL是将资源转换为base64编码的字符串，文本一般是图像文本。
- abort()：中端读取。
FileReader提供的一些完整的事件：
- onbort:读取文件中断片时触发。
- onerror:读取文件错误时候时触发。
- onload:文件读取成功后触发的事件。
- onloadend:读取完成时触发，无论成功还是失败。
- onloadstart:开始读取时候触发。
- onprogress:读取文件过程中触发事件。
实例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--实现图片的实时预览 onchange改变元素后触发方法--> <from> 文件: <input type="file" name="myFile" id="myFile" multiple onchange="getFileContext()"><br> <img id="img"><br> <input type="submit"> </from> <script> function getFileContext() { var reader=new FileReader(); //需要的参数是图片 var file=document.querySelector("#myFile").files; // 没有返回值，将其结果储存在result中，无法判断文件是否读完 reader.readAsDataURL(file[0]); reader.onload=function () { // 展示出来：得到的reader.result为二进制文件base64 data:image/jpeg;base64... console.log(reader.result); document.querySelector("#img").src=reader.result; } } </script> </body> </html>
这里是巧妙利用onchange触发改变事件，当前元素有改变时候触发。
reader.readAsDataURL(file[0]);是将得到的值转为dom操作对象。