头像预览

头像预览功能:
前端来做:
1.什么时候触发:
input值发生变化的时候

技术点

1. change事件
   当标签值发生改变的时候触发.

2.var filereader = new FileReader();//创建读取对象

3.JQuery是异步的,需要加上onload,不然显示不出来预览

4.改变标签属性的函数attr

    //找到头像的input标签,绑定change事件
    $("#id_avatar").change(function () {
        //读取选中的文件
        var filereader = new FileReader();//创建读取对象
        filereader.readAsDataURL(this.files[0]);//读取文件是需要事件的
        //把文件放在img标签中,等上一步图片读完之后再进行下一步
        filereader.onload = function () {
            $(".label-img").attr("src",filereader.result);
        }
    })