實時展示用戶上傳的頭像

實時展示用戶上傳的頭像

總體思路

"""
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>