在注册的时候如何让用户选定头像的时候有预览的功能

<div class="form-group">
        <label class="col-sm-2 control-label" for="id_avatar">
            头像
        </label>
        <div class="col-sm-8">
            <label for="id_avatar" id="id_avatar_lab">
                <img id="id_avatar-img"  src="{% static 'images/default.jpg' %}" alt="">
            </label>
            <input type="file" name="avatar" id="id_avatar" style="display: none">
            <span class="help-block"></span>
        </div>
 </div>
 <script>
  $('#id_avatar').on('change',function () {
        //1. 创建一个读取文件的对象
        var fileReader = new FileReader();
        //2. 去到当前选中得到文件头像
        fileReader.readAsDataURL(this.files[0]);
        //3. 读取你选中的那个文件,先等待文件加载完成
        fileReader.onload = function(){
             $("#id_avatar-img").attr("src",fileReader.result);
        }

    })
</script>