实时展示用户上传的头像

实时展示用户上传的头像

总体思路

"""
1.首先需要给对应的上传头像input框绑定一个文本域变化事件
（当检测到用户对该文件框上传了头像就会触发一系列操作）

2.再生成一个文件阅读器对象

3.再获取用户上传的文件头像

4.把用户上传的文件头像交给文件阅读器对象FileReader读取

5.利用文件阅读器把读取的文件头像结果展示到前端页面
（修改img的src属性，属性结果为文件阅读器的结果）

"""
# 注意：第4步的操作是异步和IO操作，异步就是不等待结果返回进行往下执行，
IO操作就是需要进行读写；所有第5步直接执行不会得到任何结果！！！

正确的操作是给第4步加上预加载（等待第4步加载完毕再执行第5步！！）

代码实现

<div class="form-group">
     <label for="myfile" style="color: white">
         头像:&nbsp&nbsp<img src="/static/img/default.png" alt="" width="80" id="myimg">
      </label>
      <input type="file" id="myfile" style="display: none" id="myfile">
</div>

<script>
    $('#myfile').change(function (){
        let fileReaderObj = new FileReader();
        let fileObj = $(this)[0].files[0];
        fileReaderObj.readAsDataURL(fileObj);
        fileReaderObj.onload = function (){
            $('#myimg').attr('src',fileReaderObj.result);
        }
    })
</script>