简单的图片即时预览功能

在这里使用的FileReader，一种异步读取本地文件的机制，可以结合input:file很简单的读取本地文本文件和图片

FileReader提供的方法：

        1. readAsText( )： 读取文本文件

        2. readAsBinaryString( )：读取二进制文件内容，将数据传递给后台处理

        3. readAsDataURL( )：读取文件获取以data开头的一段字符串即DataURL(一种将文件嵌入到文档的方案)；

FileReader提供一整套的事件模型，用来捕获读取文件状态

        1.onabort：读取文件中断时触发；

        2.onerror：读取文件出错误时触发；

        3.onload：读取文件成功时触发；

        4.onloadend：读取文件完成时触发，无论成功或者失败；

        5.onloadstart：读取文件开始时触发；

        6.onprogress：读取文件过程中持续触发；

基本步骤：

        1.html内容： 

<form action="">
    
    文件：<input type="file" name="myFile" id="myFile" onchange="getFileContent()"><br>

          <input type="submit">
</form>

<img src="" alt="">

        2.在input表单中添加onchang事件：当用户改变input中的内容时，执行getFileContent()中给js代码；

        3.创建文件读取对象：

var reader = new FlieReader();

        4.获取file表单中存储的文件(文件存储在file表单flies属性中)：

var img = document.querySelector('img'); //获取img(后面还是要获取的)

var file = document.querySelector('#myFile').files;

        5. 读取文件对象的DataURL：

reader.readAsDataURL(file[0]);    //这里返回的是空值，但是结果存储在文件对象的result中

        ps：当你console.log(reader.result);时控制台是不是没有显示输出，嘿嘿，不着急，因为还要等待读取是否成功完成，那怎么才知道嘞？看下面！！ 

        6. 运用FileReader提供的事件模型，捕获文件读取状态

              注册绑定事件，并将reader.result赋值给img.src

 reader.addEventListener('load',function(){
                // 展示：将reader.result值写入img.src中
                img.src = this.result;
            }) 

ps：基本的步骤就是这样滴，第一次写，也是将学习的知识再自己独立的消化一下；前端小白，对写代码很感兴趣，有错误还希望各位大佬多多指教。🤞