fileReader是一种一步文件读取机制，可以把fileReader想成类似于XMLHttpRequest，只不过读取是从 文件系统读取文件 （本地），而不是从服务器读取数据。
    这些读取数据的方法为处理文件数据提供了极大的灵活性。例如，为了向用户显示图片，可以将图片读取为URI，其中最有用的事件是，progress，error，load，分别表示更多数据，发生错误，读取文件完成。
    progress事件每50毫秒就会触发一次，可以读取FileReader的result属性。
    error事件会错误无法读取文件时触发，可以在FIleReader的error中读取，这是一个属性对象，只包含code，错误代码1（未找到），2（安全错误），3（读取被中断），4（文件不可读），5（编码错误）。
    load会在文件加载后触发，如果error被触发，则不会触发load事件

    • readAsText（file,encoding）：读取纯文本内容保存在result属性中，第二个参数表示编码（可选）
    • readAsDataURL（file）：读取文件并保存内通的URL保存在result属性中，可以通过url访问
    • readAsBinaryString（file）：读取文件并将每个字符的二进制保存在result属性中
    • readAsArrayBuffer（file）：读取文件并将文件内存以ArrayBuffer形式保存在result属性中
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7. </head>
    8. <body>
    9.     <img src="" alt="">
    10.     <input type="file">
    11. </body>
    12. </html>
    13. <script>
    14.     document.querySelector('input').onchange = function(event){
    15.         let file = event.target.files[0];
    16.         let reader = new FileReader();
    17.         reader.readAsDataURL(file);
    18.         reader.onload = function(){
    19.             document.querySelector('img').src = reader.result;
    20.         }
    21.     }
    22. </script>