ajax文本域变化事件

应用场景:

上传头像,头像实时展示出来

 

<div class="form-group">
　　<label for="myfile">头像
        {# 动态解析获取静态文件夹路径#}
　　　　 {# img放在label标签里实现点击图片img也能跳出文件上传框的效果 #}
        {% load static %}
        <img src="{% static 'img/default.jpg' %}" id="myimg" alt="" width="80px" style="margin-left: 10px"> 
　　</label>
　　<input type="file" id="myfile" name="avatar" style="display: none">
</div>            

 

<script>
    {# 文本域变化事件#}
    $('#myfile').change(function () {
        // 文件阅读器对象
        // 1 先生成文件阅读器对象
        let myFileReaderObj = new FileReader();
        // 2 获取用户上传的头像文件
        let fileObj = $(this)[0].files[0];
        // 3 将文件对象交给阅读器对象读取
        myFileReaderObj.readAsDataURL(fileObj);  //异步操作 IO操作
        // 4 用文件阅读器将文件展示到前端页面 即修改src属性
        // 等待myFileReaderObj加载完毕才能执行下面,否则无法显示,因为是异步操作,默认代码加载后没执行完就执行下一行代码了
        myFileReaderObj.onload = function(){
            $('#myimg').attr('src',myFileReaderObj.result)
        }
    })
</script>